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

Question

我想一直拥有导航栏和侧边栏。 但是，当尝试在屏幕上添加更多组件时，侧边栏会覆盖其他所有内容。 我该如何解决？

应用程序组件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-->

我是Bootstrap的新手（通常是Web编程），所以我确定这只是一个菜鸟错误。 我一直在玩容器（在侧边栏html上添加和删除容器），并且还弄乱了网格布局。 但是我无法弄清楚如何始终具有侧边栏和导航栏，然后无论我添加了什么模板，都始终对其进行调整。

这是我的CSS以防万一

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

我记得我以前曾尝试过此方法，但结果仅靠使用引导程序就无法实现，然后将垂直导航栏设置为在角材料的sidenav范围内，并且效果很好。 但是如果您不想使用有角度的材质，则将您的代码放在我在此答案底部设置的样式的两个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>

然后在上面的下面，将您的路由器出口包装在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;
}