Bootstrap NavBar不可折叠输入字段

Question

我有一个带有输入字段和几个链接的导航栏 但我希望只是链接崩溃。 我试图让这项工作几个小时没有成功。

它不会留在一排

我想要的是这样的东西

桌面

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

移动

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

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

另一个尝试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>