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：

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

我已阅读some solutions for this，但我希望避免使用黑客，例如style: "width: 200px;"

任何解决方案？非常感谢提前。

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

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>

Answer 3

编辑：我没有注意到OP在没有手动设置宽度的情况下要求解决方案。不过，如果你不介意最大宽度，我认为这是一个很好的选择。它只设置高分辨率的最大宽度，因此您可以在平板电脑和移动设备上保持正常行为。

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。只是工作，尝试一下。

Answer 4

我更喜欢将表单元素视为正常，并使用此CSS规则修复其外观：

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

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