html - 如何使用 Bootstrap 导航栏和侧边栏？ (组件重叠)

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

我记得我以前试过这个，结果从来不是我想要的，只是使用 bootstrap，然后我将我的垂直导航栏设置在 Angular Material 的 sidenav 内，它工作得很好。但是如果你不想使用 Angular Material ，那么将你的代码放在我在这个答案底部设置的样式的两个 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>

然后就在上面，将你的路由器 socket 包裹在一个 div 中

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

</div>

然后在你的 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;
}