Bootstrap nav Objekte mehrere Zeilen

Question

Ich versuche, eine Bootstrap-Navigation zu überarbeiten, aber es kann nicht zu zwei Zeilen Zeilen und Spalten umbrechen. Ich habe den folgenden Code (und Beispiel Screenshot (am Beispiel Logo verwendet))

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
     <div class="row"> <---- added this 
      <!-- Brand and toggle are grouped for better mobile display --> 
      <div class="navbar-header page-scroll col-md-2"> <---added col-md-2 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
        <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 page-scroll" href="#page-top"><img src="img/logo.png" alt="logo" /></a> 
       <!--<a class="navbar-brand page-scroll" href="#page-top"></a>--> 
      </div> 

      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse col-md-10" id="bs-example-navbar-collapse-1"> <---added col-md-10 
       <ul class="nav navbar-nav navbar-right"> 
        <li><a class="page-scroll" href="#services">Tandems</a></li> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Charities <span class="caret"></span></a> 
         <ul class="dropdown-menu"> 
          <li><a href="videobackground.html">NW Air Ambulance</a></li> 
          <li><a href="icons.html">Alder Hey Imagine</a></li> 
          <li><a href="typography.html">Clatterbridge</a></li> 
          <li><a href="pricingtables.html">We are Macmillan</a></li> 
         </ul> 
        </li> 
        <li><a class="page-scroll" href="#pricing">Courses</a></li> 
        <li><a class="page-scroll" href="#about">Prices</a></li> 
        <li><a class="page-scroll" href="#blog">Events</a></li> 
        <li><a class="page-scroll" href="#contact">Gallery</a></li> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Features <span class="caret"></span></a> 
         <ul class="dropdown-menu"> 
          <li><a href="videobackground.html">Video Background</a></li> 
          <li role="separator" class="divider"></li> 
          <li><a href="icons.html">Icons</a></li> 
          <li><a href="typography.html">Typography</a></li> 
          <li><a href="pricingtables.html">Pricing Tables</a></li> 
          <li><a href="buttons.html">Buttons</a></li> 
          <li><a href="progressbars.html">Progress Bars</a></li> 
          <li role="separator" class="divider"></li> 
          <li><a href="blank.html">Blank Page</a></li> 
          <li><a href="404.html">404 Page</a></li> 
         </ul> 
        </li> 
        <li><a class="page-scroll" href="#contact">The Dropzone</a></li> 
        <li><a class="page-scroll" href="#contact">Contact</a></li> 
       </ul> 
      </div> 
     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container-fluid --> 
</nav> 

und es macht wie

Was folgt, würde Ich mag für die nav Elemente ein einzuwickeln zu einer neuen Zeile wie folgt (wo ich die schwarze Linie gezeichnet habe).

Was ich zu erreichen versuche, ist für die nav Marke (Logo) 10% der Reihe aufzunehmen und für den nav Elemente Bereich um den Rest zu übernehmen. So wie es jetzt aussieht, läuft es jetzt über das Logo.

bearbeiten ein besseres Diagramm, was ich meine durch zwei Reihen

Irgendwelche Vorschläge?

Answer 1

NUTZUNG DIESES

<div class="container"> 
    <div class="row"> 
     <div class="col-md-3"> 
      logo 
     </div> 
     <div class="col-md-9"> 
      menu1 menu2 menu3 menu4 menu5 
     </div> 
    </div> 
    <br/> 
     <div class="col-md-9 col-md-offset-3"> 
      menu1 menu2 menu3 menu4 menu5 
     </div> 
</div> 

und setzen logo Position: absulate;