input - Bootstrap 。前置和附加输入。如何最大化输入字段宽度？

Question

我正在使用 Twitter 的 Bootstrap。我想要的是制作一个前置文本、输入字段和一个按钮，但我希​​望我的输入字段具有最大可用宽度，以便提交按钮的右边缘靠近井的右边缘。从 Bootstrap 文档中可以看出 .input-block-level 类可以让任何 或 元素表现得像 block 级元素，但将其应用于输入会在结果中给出中心输入的井的大小。 http://jsfiddle.net/Uc4CE/

<div class="well">
<div class="input-prepend input-append">
  <span class="add-on">Some text</span>
  <input class="input" type="text" name="xxx" value="xxx" />
  <input type="hidden" name="next" value="xxx" />
  <input type="submit" value="xx" class="btn btn-info" />
</div>
</div>

Answer 1

编辑:请注意，此答案对于 Bootstrap v2.3.x 有效。 Bootstrap 3 已经原生解决了这个问题 ( see doc )。

受 A lee 回答的启发，这是我的改进的解决方案(包括附加和前置、最小可能的附加宽度、删除不必要的样式、自动高度...)。在 Bootstrap CSS/LESS 文件之后包含此内容:

.input-append.input-block-level,
.input-prepend.input-block-level {
  display: table;
}

.input-append.input-block-level .add-on,
.input-prepend.input-block-level .add-on {
  display: table-cell;
  width: 1%; /* remove this if you want default bootstrap button width */
}

.input-append.input-block-level > input,
.input-prepend.input-block-level > input {
  box-sizing: border-box; /* use bootstrap mixin or include vendor variants */
  -moz-box-sizing: border-box; /* for Firefox */
  display: table; /* table-cell is not working well in Chrome for small widths */
  min-height: inherit;
  width: 100%;
}

.input-append.input-block-level > input {
  border-right: 0;
}

.input-prepend.input-block-level > input {
  border-left: 0;
}

在 HTML 中像这样使用它，并记住，在这种情况下，您必须使用 a 标签而不是 button 作为按钮:

<div class="input-append input-block-level">
  <input type="text" />
  <a class="btn add-on">click</a>
</div>

编辑:在IE8中，如果在.input-append.input-block-level > input中设置display: table，尽管获得焦点，输入标记仍变得不可编辑。

完全省略此 display: 参数可以使其在 IE8 以及当前的 Chrome/Safari/Firefox 中按预期工作。