Problem beim Bootstrap-Navbar-Kollabieren, wenn einige nicht ausgeblendete Elemente vorhanden sind.

Question

Ich versuche, ein Menü in einer Webseite mit Bootstrap zu implementieren, die einige Elemente enthält, die in extra kleinen Bildschirmen nicht minimiert werden.

Ich konnte Fortschritte bei der Implementierung machen. Wenn der Bildschirm sehr klein ist, funktionieren die Elemente, die nicht minimiert werden sollen, wie sie sollten. Aber das Problem ist, wenn ich auf die Navigationsschaltfläche klicke, erscheint das ausgeblendete Menü nur auf der rechten Seite des Bildschirms und es ist nicht bildschirmweit wie es normalerweise ist.

Wie kann ich dieses Problem beheben?

<nav role="navigation" class="navbar navbar-inverse"> 
 
    <div class="container"> 
 

 
    <!-- Title --> 
 
    <div class="navbar-header pull-left"> 
 
     <a class="navbar-brand" href="#">Projeto</a> 
 
    </div> 
 
    
 
    <!-- 'Sticky' (non-collapsing) right-side menu item(s) --> 
 
    <div class="navbar-header pull-right"> 
 
     <ul class="nav navbar-nav pull-left"> 
 
     <li class="pull-left"><a href="contato.html"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></a> </li> 
 
     </ul> 
 
     
 
     <!-- Required bootstrap placeholder for the collapsed menu --> 
 
     <button type="button" style="margin-left:20px;" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span><span class="icon-bar"></span> 
 
     </button> 
 
    </div> 
 
     
 
    
 
    <!-- The Collapsing items   navbar-left or navbar-right --> 
 
    <div class="collapse navbar-collapse navbar-left"> 
 
     <ul class="nav navbar-nav pull-right"> 
 
     <li class="active"><a href="index.html">Inicio</a></li> 
 
     <li class="dropdown"> 
 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">O Curso <span class="caret"></span></a> 
 
       <ul class="dropdown-menu"> 
 
        <li><a href="#">Sobre o Curso</a></li> 
 
        <li><a href="#">Disciplinas</a></li> 
 
       </ul> 
 
     </li> 
 
     <li><a href="professores.html">Professores</a></li> 
 
     <li><a href="laboratorios.html">Laboratórios</a></li> 
 
     </ul> 
 
    </div> 
 
    
 
    </div> 
 
</nav>

Answer 1

Try navbar-Festplatte mit einem Vorsprung an die Spitze des kollabierten div hinzuzufügen.