CSS Bootstrap - Mobile Navigation von rechts einschieben

Question

Ich benutze Bootstrap für meine Website Navigation, aber ich habe diese mobile Version dieser Website gesucht: http://www.levelone.ca/ und ich mag, wie ihre Navigation von rechts einschiebt.

Ist es möglich, dies mit Bootstrap zu tun oder werde ich ein anderes Plugin verwenden, um diesen Stil zu bekommen?

Hier ist meine Bootstrap-Navigation:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
    </div> 
 
    <div id="navbar" class="navbar-collapse collapse"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Who We Are <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="/about-us/">About Us</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">What We Do <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="/home-renovation/">Homes Renovation</a> 
 
      </li> 
 
      <li><a href="/custom-home/">Custom Home</a> 
 
      </li> 
 
      <li><a href="/project-management/">Project Management</a> 
 
      </li> 
 
      <li><a href="/condo-renovations/">Condo Renovations</a> 
 
      </li> 
 
      <li><a href="/luxury-features/">Luxury Features</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li> 
 
      <a href="/our-projects/">Our Projects</a> 
 
     </li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Our Insight <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="/blog/">Blog</a> 
 
      </li> 
 
      <li><a href="#">Inspiration Board</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li> 
 
      <a href="/our-process/">Our Process</a> 
 
     </li> 
 
     <li> 
 
      <a href="/contact-us/">Contact Us</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Answer 1

standardmäßig Bootstrap nicht Ihr erwartetes Verhalten für mobile Menüs bieten. Sie können jedoch die Stile überschreiben, die mit CSS mithilfe von Bootstrap bereitgestellt werden.