Formatieren bootstrap navbar

Question

Ich muss Sie fragen, weil ich versuche, meine Navbar so zu formatieren, wie ich brauche, aber ich kann nicht. Es war 3 Wochen ohne ein erfolgreiches Ergebnis.

Wenn es in normalen Bildschirmen gezeigt wird, muß meine navbar so aussehen: Normal navbar

Grundsätzlich meine Marke, ein Suchsymbol und ein Drop-Down mit meinen Profilinformationen und einig Kontext Elemente unten, dass (nur meine Marke ausgerichtet nach links und der Rest der Elemente, ausgerichtet nach rechts).

Wenn es bricht, muss er dies geworden: Collapse navbar

Die Drop-Down geht in den Papierkorb, seine gewahrt bleibt nur (das Kontextelemente ich gesprochen) und Suchsymbol bleibt außerhalb der Zusammenbruch Menü.

Wie kann ich das formatieren? Ich weiß, dass Bootstrap native CSS kann mir nicht helfen, aber ich habe keine Ahnung, wie man das mit Bootstrap + benutzerdefinierte CSS (und vielleicht etwas Javascript, wenn es nötig ist).

Answer 1

Mit Bootstrap 3's responsive utilities können Sie so gut wie alles erreichen, was Sie tun möchten. Das Hinzufügen von .visible-* und .hidden-* Klassen zu Ihrer Navbar in Verbindung mit ihren reaktiven Breakpoints gibt Ihnen das Ergebnis, das Sie suchen.

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Brand</a> 
     <div class="pull-right visible-xs hidden-sm hidden-md hidden-lg"> 
      <i class="fa fa-search"></i> 
    </div> 
    </div> 



    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav hidden-sm hidden-md hidden-lg"> 
     <li><a href="#">Submenu</a></li> 
     <li><a href="#">Submenu</a></li> 
     <li><a href="#">Submenu</a></li> 
     <li><a href="#">Sair</a></li> 
     </ul> 

     <ul class="nav navbar-nav navbar-right"> 
     <li class="visible-sm visible-md visible-lg"><i class="fa fa-search"></i></li> 
     <li class="dropdown visible-sm visible-md visible-lg"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Nome do Usuario <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Submenu</a></li> 
      <li><a href="#">Submenu</a></li> 
      <li><a href="#">Submenu</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">Sair</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 

Und dann natürlich, können Sie es in Aktion in der codeply project sehen, habe ich Ihnen einen Link zu früher.