Bootstrap NavBar不可摺疊的輸入字段

Question

我有一個導航欄有一個輸入字段和幾個鏈接 但我只想鏈接被摺疊。 我試圖讓這項工作幾個小時沒有成功。

它不會停留在一個單行

我想是這樣的

桌面

| [Brand Name] [Input field___________________________(Search)]  [Button] [Button] | 

移動

| [Brand Name] [Input field  (Search)] [#] | 
|---------------------------------------------| 
| Button          | 
| Button          | 

http://www.bootply.com/G1JJxeMQA0#

另一atempt http://www.bootply.com/n3raobttyd

Answer 1

看看這個： https://jsfiddle.net/9L3b08zf/

如果改變結果網格的大小，你會看到該鏈接將如何跳的形式一側底部。

我已經使用bootstrap網格來實現這一點。

<div class="row"> 
<div class="col-md-6 search"> 
    <form class="navbar-form" role="search" method="get" id="search-form" name="search-form"> 
     <div class="input-group"> 
      <input type="text" class="form-control" placeholder="e.g.: www.google.com" id="query" name="query" value=""> 
      <div class="input-group-btn"> 
       <button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-search"> Locate</span></button> 
      </div> 
     </div> 

     </form> 
</div> 
<div class="col-md-6 buttons"> 
    <div class="collapse navbar-collapse navbar-ex1-collapse "> 
    <div class="row"> 
     <div class="col-md-6"><a data-toggle="modal" href="#" data-target="#">Login</a></div> 
     <div class="col-md-6"><a data-toggle="modal" href="#" data-target="#">Register</a></div> 
    </div> 
    </div> 
</div>