ブートストラップ4 navbarシンプルなレイアウト

Question

私はブートストラップnavbarのための簡単なレイアウト設計をしようとしています。

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

： 1 -

はここに私のhtmlコードのドロップダウンメニューを切り替え、右にあるボタン - 中央 3でロゴを - 私は、サイドバー 2に切り替わり、左のトグルボタンを必要とします

、ここでは、CSSです：

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

誰でも助けることができますか？ 事前に感謝します

Answer 1

あなたが必要としていないnavbar-collapseを使用していない限り、navbar-togglerは使いたくありません。

はこのような何かを試してみてください。..

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>