如何使用引导导航栏和边栏？ （组件重叠）

Question

I want to have a navbar and sidebar always. But when trying to add more components to my screen, my sidebar overlaps everything else. How do I fix this?

app-component 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>

Sidebar 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>

Articles 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-->

I am new to bootstrap (and web programming in general) so I'm sure this is just a noob mistake. I've been toying with the container (adding and removing container on the sidebar html) and also messing with the grid layout. But I cannot figure out how to always have the sidebar and navbar and then always adjust for it no matter what my template is adding on.

Here is my CSS in case that is needed

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

I remember I tried this before, and the result was never what I wanted by just using bootstrap, and then i set my vertical navbar to be within angular material's sidenav, and it worked perfectly. But placing your code in the two divs with the styles I set at the bottom of this answer should be what you want if you don't want to use angular material, maybe you will be lucky and not have the same problems I had.

in your app.component.html have:

<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>

And then just under the above, wrap your router-outlet in a div

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

</div>

and then in your app.component.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;
}