bootstrap 4 navbar简单布局

Question

我正在试图为bootstrap导航栏做一个简单的布局设计。 1 - 我需要一个切换按钮，在那个切换侧栏 2左 - 在中心 3标志 - 在正确的一个按钮，切换一个下拉菜单

，这里是我的html代码：

<nav class="navbar navbar-toggleable-xs navbar-light fixed-top"> 
    <a class="navbar-toggler navbar-toggler-left mdl-button mdl-button--icon" href="#" data-toggle="collapse" data-target="#sidebar" aria-expanded="false" aria-label="Toggle navigation"> 
     <i class="material-icons">menu</i> 
    </a> 
     <a class="navbar-brand d-flex mx-auto" href="#">Logo</a>   
     <span class="navbar-toggler-right mdl-button mdl-button--icon dropdown-toggler" type="button" data-toggle="collapse" data-target=".dropdown" aria-expanded="false"><i class="material-icons">more_vert</i> 
     </span> 
      <ul class="navbar-nav"> 
      <li class="nav-item"> 
     <div class=" dropdown dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> 
      <a class="dropdown-item" href="#">Action</a> 
      <a class="dropdown-item" href="#">Another action</a> 
      <a class="dropdown-item" href="#">Something else here</a> 
     </div> 
     </li> 
    </ul> 
</nav> 
<div class="collapse" id="sidebar"></div> 

和这里的CSS：

#sidebar{ 
position: absolute; 
top: 50px; 
left: 0px; 
width: 200px; 
height: 99%; 
background-color: #333; 
z-index: 10; 
overflow: hidden; 
} 

任何人可以帮助？ 在此先感谢

Answer 1

你不想使用navbar-toggler，除非你使用navbar-collapse这看起来不像你需要的。

尝试是这样的..

https://www.codeply.com/go/GpVvCkOp4z

<nav class="navbar navbar-toggleable-xl navbar-light bg-faded"> 
    <div class="d-flex"> 
     <ul class="navbar-nav"> 
      <li class="nav-item active"> 
       <a class="nav-link" data-toggle="collapse" data-target="#sidebar" href="#sidebar"><i class="material-icons">menu</i></a> 
      </li> 
     </ul> 
    </div> 
    <a class="navbar-brand d-flex mx-auto" href="#">Logo</a> 
    <div class="dropdown"> 
     <a class="nav-link" data-toggle="dropdown"><i class="material-icons">more_vert</i></a> 
     <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink"> 
      <a class="dropdown-item" href="#">Action</a> 
      <a class="dropdown-item" href="#">Another action</a> 
      <a class="dropdown-item" href="#">Something else here</a> 
     </div> 
    </div> 
</nav>