So machen Sie Bootstrap 3 Navbar nicht wrap

Question

Ich habe eine Bootstrap 3 Navbar.

JSFiddle

<div class="navbar navbar-inverse no-print"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <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="/portal/home/index/">Logo of Site</a> 
    </div> 
    <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
      <li><a href="/portal/home/index/">Home</a></li> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">My Menu Processes<span class="caret"></span></a> 

      </li> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Enquiries<span class="caret"></span></a> 

      </li> 

      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Admin Reports <span class="caret"></span></a> 

      </li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">System Maintenance<span class="caret"></span></a>  
       </li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
      <li> 
       <a>Change password</a> 

      </li> 
      <li> 
       <a href="#">Welcome Firstname Lastname</a> 
      </li> 
      <li> 
       <a href="#">Log Out</a> 
      </li> 
     </ul> 
    </div> 
</div> 

Wenn die Breite des Fensters ist voller Desktop-Größe, es ist richtig.

Wenn die Breite des Fensters kleiner ist Handygröße ist es korrekt.

Zwischen diesen beiden Größen wird dieses Menü umbrochen und die Höhe des Menüs verdoppelt, was ich nicht möchte.

Ich denke, dass meine einzige Option wahrscheinlich die mobile Breite zu erhöhen, ist mit dazwischen Breiten zu erhöhen, um die navbar im Screenshot im Mobil-Modus zeigt.

Welche CSS brauche ich, um dies zu erreichen?

Wie erzwinge ich, dass die rechte Navigationsleiste <ul> nicht unter die linke Navigationsleiste <ul> bewegt werden darf?

Answer 1

bereits. ..

@media (max-width: 1230px) { 
.navbar-header { 
    float: none; 
} 
.navbar-left,.navbar-right { 
    float: none !important; 
} 
.navbar-toggle { 
    display: block; 
} 
.navbar-collapse { 
    border-top: 1px solid transparent; 
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 
} 
.navbar-fixed-top { 
    top: 0; 
    border-width: 0 0 1px; 
} 
.navbar-collapse.collapse { 
    display: none!important; 
} 
.navbar-nav { 
    float: none!important; 
    margin-top: 7.5px; 
} 
.navbar-nav>li { 
    float: none; 
} 
.navbar-nav>li>a { 
    padding-top: 10px; 
    padding-bottom: 10px; 
} 
.collapse.in{ 
    display:block !important; 
} 
} 

von: http://www.bootply.com/120951

Answer 2

<ul>ist ein Block-Level-Element

Sie alle li Artikel in einzelnen <ul>

<ul class="nav navbar-nav"> 
      <li><a href="/portal/home/index/">Home</a></li> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">My Menu Processes<span class="caret"></span></a> 

      </li> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Enquiries<span class="caret"></span></a> 

      </li> 

      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Admin Reports <span class="caret"></span></a> 

      </li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">System Maintenance<span class="caret"></span></a>  
       </li> 

      <li> 
       <a>Change password</a> 

      </li> 
      <li> 
       <a href="#">Welcome Firstname Lastname</a> 
      </li> 
      <li> 
       <a href="#">Log Out</a> 
      </li> 
     </ul> 

Oder Sie können rechts ausrichten und linksbündig ausrichten sowohl <ul> und setzen Registerkarte Ansicht verwenden können um jeweils 12 Spalten zu setzen, so dass sowohl <ul> in der Registerkartenansicht besser aussieht

meistens password login etc geht nach oben bar in einem separaten div ....... so wird es nicht Menüausrichtung brechen

Answer 3

Standardmäßig schaltet die Navbar und wird über das Burger-Menü auf Viewports < = 767px zugänglich. ..

Ihre beste Wette (etwas, was ich die ganze Zeit mit BS tun!) Ist zu machen, ist bei größeren Viewports zusammenbrechen. Sie können dies mit diesem handlichen Codeschnipsel tun.

@media (min-width: 768px) and (max-width: 991px) { /* You can change the max-width to whatever you want... */ 
    .parent-class .navbar-collapse.collapse { 
     display: none; 
    } 
    .parent-class .navbar-collapse.collapse.in { 
     display: block; 
    } 
    .parent-class .navbar-header .collapse, .navbar-toggle { 
     display:block; 
    } 
    .parent-class .navbar-header { 
     float:none; 
    } 
} 

Die oben ist eine modifizierte Version einer anderen Antwort auf SO von vor einiger Zeit - ich nicht den Link finden kann (ich habe diesen Schnipsel auf meinem PC lauert, wie ich es oft benutzen).

Sie werden bemerken, ich .parent-class zu den oben genannten Selektoren vorangestellt habe, ist dies diese Stile den Standard BootStrap Stile außer Kraft setzen, um sicherzustellen, die normalerweise nicht außer Kraft gesetzt, bis 767px erhalten und unter ...