ブートストラップは検索バーをナビゲーションの下に表示します

Question

メニューが折り畳まれた状態でナビゲーションの下にナビゲーションを表示しようとしています。しかし、1200幅で折り畳みを実装すると、メニューが折りたたまれても検索バーが右側に表示されます。

2つ目は、両方のナビゲーションセクションを分離するためにdivを使用しているため、メガメニュースタイルを使用すると、ドロップダウンの幅がcol-md-9に制限されます。私はむしろそれがナビゲーションの全幅である終わりまでであることを望んでいます。

<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

NAVと検索バーが同じ行 であろう> 1200より大きい解像度で容器流体代わり行

の使用は、そう

を使用します

col-lg-9 onナビゲーションバーヘッダ及び解像度に

ナビゲーションバー状にcol-lg-3以下< 1200よりもそれらが異なる行であろう。

アップデート：また、溶液中での問題は、検索バーがフル崩壊メニューと大きな幅の幅と第二ときでないときということです

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

heres the updated jsfiddle