Twitter Bootstrap 输入框的最大宽度

Question

我使用最新的 Twitter Bootstrap 框架创建了以下设置： http://jsfiddle.net/hfexR/2/ 现在，当旁边没有按钮时，我希望输入字段占据最大宽度。

使用纯 CSS 或 Twitter Bootstrap 本身如何实现这一点？

类似于 inline-block 应该有效，但我目前还不太明白...

- bodokaiser

---

你不应该将 .span4 和 .well 结合在一起。你尝试过在 .well 中使用 .row-fluid 和 span 吗？ - Sherbrow

1. 结合span和wells有什么问题？
2. 你能给我一个例子吗？

- bodokaiser

Answer 1

您可以像这个 代码片段 中使用 input-block-level 类。

<div class="container">
  <div class="span4 well">
    <form class="form-search">
      <input type="text" class="input-block-level search-query">
    </form>
    <form class="form-search">
      <input type="text" class="input-medium search-query">
      <button type="submit" class="btn">Cancel</button>
    </form>
  </div>
</div>

- nelsito

---

是的，input-block-level可以解决问题，并且具有良好的响应性。https://dev59.com/gGgu5IYBdhLWcg3wkH2P - mcNux

Answer 2

编辑：自从Bootstrap v3以来，类已经发生了变化，因此请使用col-xx-X类来获得下面解释的结果（可能需要进一步更改）

---

实时演示（jsfiddle）

您可以使用.row-fluid并使用.spanX使输入框填充其容器：

<form class="form-search">
  <div class="row-fluid">
      <input type="text" class="input-medium search-query span12">
  </div>
</form>
<form class="form-search">
  <div class="row-fluid">
      <input type="text" class="input-medium search-query span8">
      <button type="submit" class="btn span4">Cancel</button>
  </div>
</form>

看起来按钮/输入组合需要进行一些小修复：

/* May not be the best way, not sure if BS has a better solution */
/* Fix for combining input and button spans in a row */
.row-fluid > input + button[class*="span"] {
    float: none;           /* Remove the */
    display: inline-block; /* floating   */
    margin-left: 0;        /* Stick it to the left */
}

最后一件事，您不应该将 .spanX 和 .well 结合在一起，因为它们具有 padding、边框和其他属性，这里是 为什么不应该这样做的示例(jsfiddle)。

- Sherbrow

---

在Bootstrap 3中，span类已被移除。 - krock

@krock确实类已经改变，但答案的精神是相同的，请参见col-xx-X类和相关联的内容。 - Sherbrow