在移动设备中查看时带有侧边栏的 Bootstrap 导航栏

Question

我正在为我的 Web 应用程序使用 Bootstrap Navbar，它工作正常。使用此链接

它也是响应式的，这正是我所需要的，但正如您所知，当屏幕尺寸减小并更改为下拉菜单时，引导导航栏会更改为汉堡包图标。

像这样的东西

当我想创建一个侧面导航栏时，我的意思是它应该显示像 Materialize CSS LINK中的元素

我做了很多研究并得到了这个https://startbootstrap.com/template-overviews/simple-sidebar/

但这里顶部没有导航栏，它只是一个侧面导航栏，因为当屏幕尺寸缩小到移动设备时我想要此功能。

另外，我的引导导航栏菜单有下拉菜单，所以我不知道如何在侧面导航 CSS 中处理它。请帮助我是 CSS 新手。

我不能选择物化CSS，因为将所有引导更改物化的成本太大了。

如果使用纯 CSS 就可以做到这一点，那就像是锦上添花。

提前致谢。

更新

这是我的导航栏

nav class="navbar navbar-toggleable-md navbar-light bg-faded  navbar-fixed-top">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
    aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation" (click)="isActive = !isActive">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a routerLink="/home"><img src="angular.png" class = "myImage" alt="Image"/></a>
  <div class="collapse navbar-collapse" id="navbarNavDropdown" [ngClass]="{show : isActive}">
    <ul class="navbar-nav">
      <li class="nav-item dropdown" [routerLinkActive]="['active']" appDropdown>
        <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Basic Concepts
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a [routerLink]="['/a4']" class="dropdown-item">Angular Component</a>
          <a [routerLink]="['/cli']" class="dropdown-item">Angular CLI</a>
          <a [routerLink]="['/inout']" class="dropdown-item">Event Emitters</a>
          <a class="dropdown-item" [routerLink]="['/template']">Template Driven Forms</a>
          <a class="dropdown-item" [routerLink]="['/reactive']">Reactive Forms</a>
          <a class="dropdown-item" [routerLink]="['/directives']">Angular Custom Directives</a>
          <a class="dropdown-item" [routerLink]="['/pipes']">Custom Pipes</a>
          <a class="dropdown-item" [routerLink]="['/viewchild']">View Child</a>
          <a class="dropdown-item" [routerLink]="['/view']">View Encapsulation</a>
        </div>
      </li>

      <li class="nav-item dropdown" [routerLinkActive]="['active']" appDropdown>
        <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Advanced Concepts
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink1">
          <a class="dropdown-item" [routerLink]="['/ngrx']">Angular Redux using ngrx/store</a>
          <a class="dropdown-item" [routerLink]="['/guard']">Angular Guards</a>
          <a class="dropdown-item" [routerLink]="['/host']">Host & Host-Context</a>
          <a class="dropdown-item" [routerLink]="['/dynamic']">Dynamic Component</a>
        </div>
      </li>

      <li class="nav-item dropdown" [routerLinkActive]="['active']" appDropdown>
        <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Additional
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink2">
          <a class="dropdown-item" [routerLink]="['/charts']">Angular + HighCharts</a>
          <a class="dropdown-item" [routerLink]="['/firebase']">FireBase Functions</a>
          <a class="dropdown-item" [routerLink]="['/myworks']">My Angular Projects</a>
        </div>
      </li>

      <li class="nav-item" [routerLinkActive]="['active']">
        <a class="nav-link" [routerLink]="['/comment']">Comments</a>
      </li>

      <li class="nav-item" [routerLinkActive]="['active']">
        <a class="nav-link" [routerLink]="['/faq']"><strong>F.A.Q</strong></a>
      </li>

      <li class="nav-item" [routerLinkActive]="['active']">
        <a class="nav-link" (click)="openDialog()">Contact Card</a>
      </li>

    </ul>
  </div>
</nav>

Answer 1

如果没记错的话，您想使用引导程序实现移动设备的“滑动菜单”。以下是您可以用来实现该目的的代码片段：

参考链接：https://bootsnipp.com/snippets/featured/navbar-terior-slide-menu

HTML 示例：

<header role="banner" class="navbar navbar-fixed-top navbar-inverse">
      <div class="container">
        <div class="navbar-header">
          <button data-toggle="collapse-side" data-target=".side-collapse" data-target-2=".side-collapse-container" type="button" class="navbar-toggle pull-left"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
        </div>
        <div class="navbar-inverse side-collapse in">
          <nav role="navigation" class="navbar-collapse">
            <ul class="nav navbar-nav">
              <li><a href="#Home">Home</a></li>
              <li><a href="#users">Users</a></li>
              <li><a href="http://placesforlove.com">Places</a></li>
            </ul>
          </nav>
        </div>
      </div>
    </header>
    <div class="container side-collapse-container">
      <div class="row">
        <h1>Hello</h1>
        <p>This is a side opening nav demonstration</p>
        <p>Make your browser smaller and the top menu wil become into a lateral slider menu</p>
      </div>
    </div>

CSS：

body {
          padding-top: 50px;
          position: relative;
      }

      pre {
          tab-size: 8;
      }

      @media screen and (max-width: 768px) {
          .side-collapse-container{
              width:100%;
              position:relative;
              left:0;
              transition:left .4s;
          }
          .side-collapse-container.out{
              left:200px;
          }
          .side-collapse {
              top:50px;
              bottom:0;
              left:0;
              width:200px;
              position:fixed;
              overflow:hidden;
              transition:width .4s;
          }
          .side-collapse.in {
              width:0;
          }
      }

JS：

$(document).ready(function() {   
            var sideslider = $('[data-toggle=collapse-side]');
            var sel = sideslider.attr('data-target');
            var sel2 = sideslider.attr('data-target-2');
            sideslider.click(function(event){
                $(sel).toggleClass('in');
                $(sel2).toggleClass('out');
            });
        });