导航下的Bootstrap显示搜索栏

Question

我试图在菜单处于折叠状态时在导航下显示导航。但是，当我以1200的宽度实施折叠时，即使菜单已折叠，搜索栏也会显示在右侧。

其次，因为我使用div来分隔两个导航部分，所以当我使用mega菜单样式时，下拉的宽度仅限于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

在较大的分辨率使用容器流体而不是行

> 1200的资产净值和搜索栏将在同一行 所以使用

col-lg-9打开导航栏标头和col-lg-3导航栏形式对分辨率

比< 1200以下，他们将在不同的行。

更新：还可以使用下面的CSS

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

heres the updated jsfiddle