ブートストラップナビバーとサイドバーの使用方法は？ （コンポーネントが重なっている）

Question

私はいつもnavbarとサイドバーを持っていたい。しかし、画面に 多くのコンポーネントを追加しようとすると、私のサイドバーは他のものと重なってしまいます。どのように これを解決するのですか？

アプリ成分のhtml：

<app-header></app-header> 
<app-sidebar></app-sidebar> 
<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-md-12"> 
     <app-articles></app-articles> 
    </div> 
    </div> 
</div> 

サイドバーのHTML：

<div class="container-fluid"> 
    <div class="row"> 
    <nav class="col-sm-3 col-md-2 hidden-xs-down bg-faded sidebar"> 
     <ul class="nav nav-pills flex-column"> 
     <li class="nav-item"> 
      <a class="nav-link active" href="#">Workouts <span class="sr-only">(current)</span></a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">User History</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Tools</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Recipes</a> 
     </li> 
     </ul> 
    </nav> 
    </div> 
</div> 

記事のhtml：

<div class="col-xs-12 col-sm-9"> 
    <br> 
    <div class="jumbotron"> 
    <a href="#" class="visible-xs" data-toggle="offcanvas"><i class="fa fa-lg fa-reorder"></i></a> 
    <h1>Hello, world!</h1> 
    <p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p> 
    </div> 
    <div class="row"> 
    <div class="col-6 col-sm-6 col-lg-4"> 
     <h2>Heading</h2> 
     <p>Bootstrap is a front-end framework that uses CSS and JavaScript to facilitate responsive Web design. Bootply is a playground for Bootstrap that enables developers and designers to test, prototype and create mockups using Bootstrap 
     friendly HTML, CSS and Javascript.</p> 
     <p><a class="btn btn-default" href="#">View details »</a></p> 
    </div> 
    <!--/span--> 
    <div class="col-6 col-sm-6 col-lg-4"> 
     <h2>Heading</h2> 
     <p>Bootply is a playground for Bootstrap that enables developers and designers to test, prototype and create mockups using Bootstrap friendly HTML, CSS and Javascript. Bootstrap is a front-end framework that uses CSS and JavaScript to 
     facilitate responsive Web design. </p> 
     <p><a class="btn btn-default" href="#">View details »</a></p> 
    </div> 
    <!--/span--> 

    <div class="col-6 col-sm-6 col-lg-4"> 
     <h2>Heading</h2> 
     <p>Bootstrap is a front-end framework that uses CSS and JavaScript to facilitate responsive Web design. Bootply is a playground for Bootstrap that enables developers and designers to test, prototype and create mockups using Bootstrap 
     friendly HTML, CSS and Javascript.</p> 
     <p><a class="btn btn-default" href="#">View details »</a></p> 
    </div> 
    <!--/span--> 
    <div class="col-6 col-sm-6 col-lg-4"> 
     <h2>Heading</h2> 
     <p>Bootstrap is a front-end framework that uses CSS and JavaScript to facilitate responsive Web design. Bootply is a playground for Bootstrap that enables developers and designers to test, prototype and create mockups using Bootstrap 
     friendly HTML, CSS and Javascript.</p> 
     <p><a class="btn btn-default" href="#">View details »</a></p> 
    </div> 
    <!--/span--> 
    </div> 
    <!--/row--> 
</div> 
<!--/span--> 

私はブートストラップ（とウェブプログラミング全般）の新機能ですので、私は確信しています これはちょうどnoobの間違いです。私はコンテナ （サイドバーhtmlのコンテナの追加と削除）とグリッドレイアウトの を使っていました。しかし、 のサイドバーとナビバーを常に持つ方法を理解しておらず、 テンプレートが追加されている場合でも常に調整しています。ここで

は私が前にこれを試してみましたが、その結果が、私はちょうどブートストラップを使用して欲しかったものではなかった、そして私を覚えて

body { 
    background-color: #dfe3ee; 
} 
body.sidebar { 
    background-color: #f7f7f7; 
} 
.navbar-default { 
    background-color: #3b5998; 
    width: 100%; 
} 
/* Title */ 
.navbar-default .navbar-brand { 
    color: white; 
} 
.navbar-default .navbar-nav > li > a { 
    color: white; 
} 

/*footer {*/ 
    /*padding-left: 15px;*/ 
    /*padding-right: 15px;*/ 
/*}*/ 

/* 
* Base structure 
*/ 

/* Move down content because we have a fixed navbar that is 50px tall */ 

/* 
* Sidebar 
*/ 

.sidebar { 
    position: fixed; 
    top: 51px; 
    bottom: 0; 
    left: 0; 
    z-index: 1000; 
    padding: 20px; 
    overflow-x: hidden; 
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ 
    border-right: 1px solid #eee; 
} 

/* Sidebar navigation */ 
.sidebar { 
    padding-left: 0; 
    padding-right: 0; 
    background-color: white; 
} 

.sidebar .nav { 
    margin-bottom: 20px; 
} 

.sidebar .nav-item { 
    width: 100%; 
} 

.sidebar .nav-item + .nav-item { 
    margin-left: 0; 
} 

.sidebar .nav-link { 
    border-radius: 0; 
} 

/* 
* Dashboard 
*/ 

/* Placeholders */ 
.placeholders { 
    padding-bottom: 3rem; 
} 

.placeholder img { 
    padding-top: 1.5rem; 
    padding-bottom: 1.5rem; 
} 


/* 
* off Canvas sidebar 
* -------------------------------------------------- 
*/ 
/*@media screen and (max-width: 768px) {*/ 
    /*.row-offcanvas {*/ 
    /*position: relative;*/ 
    /*-webkit-transition: all 0.25s ease-out;*/ 
    /*-moz-transition: all 0.25s ease-out;*/ 
    /*transition: all 0.25s ease-out;*/ 
    /*width:calc(100% + 220px);*/ 
    /*}*/ 

    /*.row-offcanvas-left*/ 
    /*{*/ 
    /*left: -220px;*/ 
    /*}*/ 

    /*.row-offcanvas-left.active {*/ 
    /*left: 0;*/ 
    /*}*/ 

    /*.sidebar-offcanvas {*/ 
    /*position: absolute;*/ 
    /*top: 0;*/ 
    /*}*/ 
/*}*/ 

Answer 1

を必要とする場合には、私のCSSです私の垂直ナビゲーションバーを角度のある素材のsidenav内に設定して、それは完全に機能しました。しかし、この回答の一番下に設定したスタイルを使って2つのdivにコードを配置すると、角度のある素材を使用したくない場合は、幸運になり、同じ問題がないかもしれません。あなたのapp.component.htmlで

は持っている：

<md-sidenav 
    #sidenav 
    layout="column" 
    class="left-mdsidenav" 
    align="start" 
    mode="side" 
    opened="true"> 

Your navbar and styling, in a div with overflow-y: scroll; 

</md-sidenav> 

そしてちょうど上記の下で、あなたのapp.componentで、その後のdivに

<div class="main-content"> 
    <router-outlet></router-outlet> 

</div> 

をルーター・コンセントをラップし。 scss：

.left-mdsidenav { 
    width:220px; 
    height: 100vh; 
    position: fixed; 
} 

.main-content { 
    top: 0; 
    bottom:0; 
    position: fixed; 
    width: -moz-calc(100vw - 220px); 
    /* WebKit */ 
    width: -webkit-calc(100vw - 220px); 
    /* Opera */ 
    width: -o-calc(100vw - 220px); 
    /* Standard */ 
    width: calc(100vw - 220px); 
    margin-left: 220px; 
    overflow-y: scroll; 
}