Bootstrap 3：导航栏形式的输入组占据整个宽度

这就是 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>

我读了对此的一些解决方案 https://github.com/twbs/bootstrap/issues/9950， 但是我要避免使用黑客手段 like style: "width: 200px;"

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

我想到了一种最小的方法来解决这个问题，而无需修改 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%;
    }
  }
}

Result:

为了清楚起见，我的目标是 CSS 中的后代元素。这不是定位 CSS 元素的最有效方法。如果您喜欢这个答案，请考虑为输入和按钮提供唯一的类名称，并在 CSS 中不使用任何后代选择器来定位它们（​​请阅读：http://csswizardry.com/2011/09/writing-efficient-css-selectors/ http://csswizardry.com/2011/09/writing-efficient-css-selectors/)