Bootstrap导航栏：折叠时保持元素在同一行

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>

- Tom O'Brien

---

你能否创建一张展示你想要的图片吗？这将非常好。附注：你想让搜索栏消失吗？ - Evochrome

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;
}

and here is a fiddle demo

- Asons

Answer 2

在移动屏幕上，您可以将搜索按钮定位为绝对位置，然后将其放置在搜索输入框的右侧，并给输入框添加右侧填充，这样它就会显示在同一行上。因此，首先将.navbar-form定位为相对位置，然后在移动宽度上将搜索按钮定位为绝对位置，然后给搜索输入框添加右填充以弥补按钮被放置在其上方的情况，如下所示：

这里是一个演示 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;
  }
}

- Steve K

Answer 3

试试这个

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

<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>

- Yupage

---

这会将每个元素放在自己单独的一行上。但我需要搜索字段和按钮在同一行上。 - Tom O'Brien

好的，请尝试这个并告诉我是否有效：<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" style="display:inline-block;width:90%"><button type="submit" class="btn btn-default btn-search""> <span class="glyphicon glyphicon-search"></span> </button></div> <button type="submit" class="btn btn-default">浏览</button> </form></div> - Yupage