twitter-bootstrap 输入字段的最大宽度

Question

我使用最新的 twitter 引导框架进行了以下设置：

http://jsfiddle.net/hfexR/2/

我现在希望输入字段在旁边没有按钮时采用最大宽度。

如何使用纯 css 或 twitter-bootstrap 本身来做到这一点？

像 inline-block 这样的东西应该去，我现在不明白......

Answer 1

你可以像fiddle那样使用te class 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>

Answer 2

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

---

Live demo (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 和边框和其他东西，这里是an example of why (jsfiddle)。