bootstrap 4 navbar einfaches Layout

Question

Ich versuche, ein einfaches Layout-Design für eine Bootstrap-Navbar zu machen. 1 - Ich brauche einen Toggle-Button auf der linken Seite, die eine Seitenleiste 2 schaltet - ein Logo in der Mitte 3 - auf der rechten Seite eine Schaltfläche, die ein Dropdown-Menü schaltet

meine HTML-Code ist hier:

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

und hier ist die CSS:

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

kann jemand helfen? Vielen Dank im Voraus

Answer 1

Sie möchten nicht die navbar-toggler verwenden, wenn Sie die navbar-collapse verwenden, die nicht so aussieht, wie Sie brauchen.

Versuchen Sie so etwas ..

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>