Bootstrap zeigen Suchleiste unter Navigation

Question

Ich versuche, Navigation unter der Navigation anzuzeigen, wenn das Menü in minimiertem Zustand ist. Aber wenn ich den Kollaps bei 1200 Breite implementiere, wird die Suchleiste rechts angezeigt, auch wenn das Menü zusammengebrochen ist.

Zweitens, da ich ein div verwende, um beide Abschnitte der Navigation zu trennen, wenn ich Mega-Menü-Stil verwende, ist die Breite des Dropdowns auf col-md-9 beschränkt. Ich möchte es lieber bis zum Ende haben, welches die volle Breite der Navigation ist.

<nav class="navbar navbar-default" role="navigation"> 
<div class="row"> 
    <div class="col-sm-9 col-md-9"> 
     <div class="navbar-header"> 
      <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" href="#">Company Name</a> 
     </div> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="#">Link</a></li> 
       <li><a href="#">Link</a></li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#">Action</a></li> 
         <li><a href="#">Another action</a></li> 
         <li><a href="#">Something else here</a></li> 
         <li class="divider"></li> 
         <li><a href="#">Separated link</a></li> 
         <li class="divider"></li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
    </div> 
    <div class="col-sm-3 col-md-3 pull-right"> 
    <form class="navbar-form" role="search"> 
     <div class="input-group"> 
      <input type="text" class="form-control" placeholder="Search" name="q"> 
      <div class="input-group-btn"> 
      <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> 
      </div> 
     </div> 
    </form> 
    </div> 
</div> 

@media (max-width: 1200px) { 
.navbar-header { 
    float: none; 
    height: 80px!important; 
} 
.navbar-left,.navbar-right { 
    float: none !important; 
} 
.navbar-toggle { 
    margin-top: 20px; 
    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; 
} 


.navbar-nav .open .dropdown-menu { 
     position: static; 
     float: none; 
     width: auto; 
     margin-top: 0; 
     background-color: transparent; 
     border: 0; 
     -webkit-box-shadow: none; 
     box-shadow: none; 
    } 
    .navbar-nav > li > a { 
      line-height: 20px!important; 
     padding-top: 10px!important; 
      padding-bottom: 10px!important; 
    } 
    .navbar-brand>img { 
     position:absolute!important; 
     left: -50px!important; 
     top: 0px!important; 
     padding: 0px!important; 
    } 

JS Fiddle Link

Answer 1

Verwenden Behälter-Flüssigkeit anstelle von Zeilen

bei größerer Auflösung> 1200 die nav und Suchleiste auf der gleichen Zeile sein wird so verwenden

col-lg-9 an navbar-Header und col-lg-3 auf navbar-Form

auf Auflösung kleiner als < 1200 werden sie in verschiedenen Reihen sein.

Update: auch verwenden Sie die folgende CSS

@media (min-width: 768px){ 
    .input-group-btn{ 
    width: 1% !important; 
    } 
    } 

heres the updated jsfiddle