Bootstrap Navigationsleiste Menüpunkt Überlauf

Question

Ich benutze Bootstrap und Bootsnips css http://bootsnipp.com/user/snippets/rVnKg in der Navigationsleiste.

ist hier JSFiddle Link - http://jsfiddle.net/ask1987/8xc7fk43/

den Link JSFiddle Bitte überprüfen Sie

.dropdown-submenu { 
 
    position: relative; 
 
} 
 

 
.dropdown-submenu>.dropdown-menu { 
 
    top: 0; 
 
    left: 100%; 
 
    margin-top: -6px; 
 
    margin-left: -1px; 
 
    -webkit-border-radius: 0 6px 6px 6px; 
 
    -moz-border-radius: 0 6px 6px; 
 
    border-radius: 0 6px 6px 6px; 
 
} 
 

 
.dropdown-submenu:hover>.dropdown-menu { 
 
    display: block; 
 
} 
 

 
.dropdown-submenu>a:after { 
 
    display: block; 
 
    content: " "; 
 
    float: right; 
 
    width: 0; 
 
    height: 0; 
 
    border-color: transparent; 
 
    border-style: solid; 
 
    border-width: 5px 0 5px 5px; 
 
    border-left-color: #ccc; 
 
    margin-top: 5px; 
 
    margin-right: -10px; 
 
} 
 

 
.dropdown-submenu:hover>a:after { 
 
    border-left-color: #fff; 
 
} 
 

 
.dropdown-submenu.pull-left { 
 
    float: none; 
 
} 
 

 
.dropdown-submenu.pull-left>.dropdown-menu { 
 
    left: -100%; 
 
    margin-left: 10px; 
 
    -webkit-border-radius: 6px 0 6px 6px; 
 
    -moz-border-radius: 6px 0 6px 6px; 
 
    border-radius: 6px 0 6px 6px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
 
    <div class="container-fluid">   
 
     <div class="collapse navbar-collapse">    
 
      <ul class="nav navbar-nav navbar-right">     
 
       <li> 
 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu 1<b class="caret"></b></a> 
 
        <ul class="dropdown-menu multi-level"> 
 
         <li class="dropdown-submenu"> 
 
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> 
 
          <ul class="dropdown-menu"> 
 
           <li><a href="#">ActionActi onActionA ction</a></li> 
 
          </ul> 
 
         </li>  
 
        </ul> 
 
       </li> 
 
     </div> 
 
    </div> 
 
</div>

Das Problem ist, Menüpunkte überfüllt werden, wenn navbar-Rechts-Klasse auf ul-Element verwendet wird.

Wenn es nach links eingestellt ist, funktioniert die Navigationsleiste einwandfrei.

Kann jemand mit diesem Problem helfen?

Answer 1

dieser Klasse entfernen

class="collapse navbar-collapse" 

Jeder, wo jeder die nav Links, Formulare wird, wie es früher zu sammeln und andere Inhalte für Makeln, wo Sie es nicht verwenden.

Working Example und beziehen Sie sich auf Bootstrap Navabar für weitere Details.