折叠后，Bootstrap Navbar将元素保持在同一行上

Question

我正在使用Bootstrap导航栏并使用它的折叠功能。

在我完全展开的导航栏中，我有三个元素 - 搜索字段及其按钮，还有一个浏览按钮。

当它崩溃时，我希望搜索字段和它的提交按钮出现在同一行。但是，当我的导航栏折叠时，它会将搜索字段放在它自己的行上，然后提交＆＃34;提交＆＃34;和＆＃34;浏览＆＃34;按钮在同一行。下图显示了我的意思。

我希望它有搜索字段和glyphicon＆＃39;提交＆＃39;一行上的按钮，以及下面一行的浏览按钮。

这是我正在使用的html：

<div class="collapse navbar-collapse" id="example-navbar-collapse">
    <form class="navbar-form navbar-left">
        <div class="form-group">
            <input type="text" class="form-control">
        </div><!-- 
         --><button type="submit" class="btn btn-default btn-search"">
            <span class="glyphicon glyphicon-search"></span>
        </button>
        <button type="submit" class="btn btn-default">Browse</button>
    </form>
</div>

Answer 1

将按钮放在form-group，

中

<div class="form-group">
    <input type="text" class="form-control">
    <button type="submit" class="btn btn-default btn-search">
        <span class="glyphicon glyphicon-search"></span>
    </button>
</div>

将此添加到您的CSS

.navbar-form .form-group input {
  width: calc(100% - 50px);
  display: inline-block;
  vertical-align: top;
}

这是一个fiddle demo

Answer 2

尝试这个

＆＃13;

＆＃13;

.form-control{display:inline-block;width:80%}.btn-search{width:10%}

＆＃13;

<div class="collapse navbar-collapse" id="example-navbar-collapse">
    <form class="navbar-form navbar-left">
        <div class="form-group">
            <input type="text" class="form-control"><button type="submit" class="btn btn-default btn-search"">
            <span class="glyphicon glyphicon-search"></span>
        </button></div>
        <button type="submit" class="btn btn-default">Browse</button>
    </form>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

在移动屏幕上，您可以将搜索按钮定位到绝对位置，然后将其放在右侧的搜索输入上，然后在右侧为输入提供填充，它将显示在同一行上。因此，首先将.navbar-form定位到relative，然后将移动宽度定位到搜索按钮的绝对位置，然后给搜索输入一个右边的填充，以便将按钮放在它的顶部，如下所示：

这是一个小提琴Fiddle

.navbar-form{
  position: relative;
}
@media screen and (max-width: 767px){
  .navbar-form .btn-search{
    position: absolute;
    right: 15px;
    top: 10px;
  }
  .navbar-form input{
    padding-right: 40px;
  }
}