css - Bootstrap Navbar 在折叠时将元素保持在同一行

Question

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

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

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

我希望搜索字段和字形“提交”按钮位于一行，浏览按钮位于下一行。

这是我正在使用的 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