Bootstrap 3：导航栏表单中的输入组占据整个宽度

Question

这是Bootstrap导航栏表单的样子。

默认的HTML代码为：

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search for awesome stuff">
  </div>
  <button type="submit" class="btn btn-default">Search</button>
</form>

但是我想把输入框和按钮像 input-group 一样组合在一起。 然而，当我尝试将输入框和按钮包装在 input-group 中时，它最终占据了整个宽度：

HTML:

```html ```

<form class="navbar-form navbar-left" role="search">
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Search for awesome stuff">
    <span class="input-group-btn"><button type="submit" class="btn btn-default">Search</button></span>
  </div>
</form>

我已经阅读了一些解决方案，但我想避免使用像style: "width: 200px;"这样的hack。

有什么解决办法吗？非常感谢。

- Michelle

---

你能否在输入组上使用包装器并为其分配宽度？ - hugo der hungrige

我不想手动分配宽度（或任何类似的“hack”） - Michelle

在我看来，这不是黑客行为。input-group 的预期行为是占据其父元素的全部宽度。您希望 input-group 具有什么宽度或行为？ - hugo der hungrige

Answer 1

我想到了一种最简单的方法来修复这个问题，而不需要修改Bootstrap文档中使用的导航栏表单的默认结构。

将类navbar-input-group添加到表单中。

<form class="navbar-form navbar-left navbar-input-group" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search for awesome stuff">
  </div>
  <button type="submit" class="btn btn-default">Search</button>
</form>

CSS（如有必要，请放在媒体查询中）：

.navbar-input-group {
  font-size: 0px; /*removes whitespace between button and input*/
}

.navbar-input-group input {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
.navbar-input-group .btn {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-left: 0px;
}

或者使用 SCSS（保持响应性不变）：

@import "bootstrap-variables";

.navbar-input-group {
  @media (min-width: $screen-sm) {
    font-size: 0px; /*removes whitespace between button and input*/

    input {
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
    }
    .btn {
      border-top-left-radius: 0px;
      border-bottom-left-radius: 0px;
      border-left: 0px;
    }
  }
  @media (max-width: $screen-xs-max) {
    margin-top:0px;
    margin-bottom:0px;

    .btn {
      width:100%;
    }
  }
}

结果：

为了清晰起见，我在CSS中针对后代元素进行定位。这不是最有效的定位CSS元素的方法。如果您喜欢这个答案，请考虑为输入和按钮设置唯一的类名，在您的CSS中无需任何后代选择器即可定位它们（参见：http://csswizardry.com/2011/09/writing-efficient-css-selectors/）

- Michelle

---

这会破坏导航栏的响应性。请更新以包含您描述的媒体查询。 - MacKinley Smith

如果您添加，还可以在输入 .navbar-input-group .btn:not(:first-child):not(:last-child) { border-radius: 0; }之后堆叠多个按钮。 - Alexandre Mélard

Answer 2

你的解决方案占据整个宽度的事实是一件好事。现在使用嵌套的行和列来定义你实际想让搜索栏占用多少空间。

<div class="row">
    <div class="col-md-3">
        <form class="navbar-form navbar-left" role="search">
         <div class="input-group">
            <input type="text" class="form-control" placeholder="Search for awesome stuff">
            <span class="input-group-btn"><button type="submit" class="btn btn-default">Search</button></span>
          </div>
        </form>
    </div>
</div>

- James Lai

---

哦，没想到。非常好用。谢谢！ :) - Michelle

Answer 3

编辑：我没有注意到OP要求在CSS中不手动设置宽度的解决方案。但是，如果您不介意最大宽度，我认为这是一个很好的替代方案。它仅针对高分辨率设置最大宽度，因此您可以在平板电脑和移动设备上保持正常行为。

1）在div.input-group上添加navbar-searchbox：

<form class="navbar-form navbar-left" role="search">
  <div class="input-group navbar-searchbox">
    <input type="text" class="form-control">
    <div class="input-group-btn">
      <button type="submit" class="btn btn-default">Search</button>
    </div>
  </div>
</form>

2) 将此内容放入您的 .lass 文件中。

@media (min-width: @screen-sm-min) {
  .navbar-searchbox {
    max-width: 250px;
  }
}

3) 在房间里跳来跳去地喊胜利！

不需要使用表格，是的，这就是你所需的全部CSS。它可以直接使用，试一下吧。

- user2847643

---

太厉害了！我没有跳跃（房间里有人），但它仍然有效！ - Diego Jancic

Answer 4

我更喜欢将表单元素视为正常元素，然后使用以下 CSS 规则来固定其外观：

.navbar-form .input-group {
    display: inline-block;
    width: auto;
    vertical-align: middle;

    .form-control,
    .input-group-btn {
        float: left;
    }
}

- Tim