4

I got a following set up using the lastest twitter bootstrap framework:

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

I now want that the input field takes the maximum width when there is no button next to.

How can I do this with pure css or with twitter-bootstrap itself?

Something like inline-block should go, I just don't get it at the moment...

4

2 回答 2

2

您可以像在这个小提琴中一样使用 te 类输入块级别

<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>
于 2013-05-17T20:22:10.117 回答
1

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

现场演示（jsfiddle）

您可以使用 a.row-fluid和 use.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因为paddingand 边界和其他东西，这里是一个为什么 (jsfiddle) 的例子。

于 2012-08-25T09:26:29.043 回答