引导.前置和附加输入.如何最大输入字段宽度？

Question

我正在使用Twitter的Bootstrap.我想要的是制作一个前置文本,输入字段和一个按钮,但我希​​望我的输入字段具有最大可用宽度,以便提交按钮的右边缘靠近井的右边缘.从引导文档中有.input-block-level类,它允许任何或元素的行为类似于块级元素,但将其应用于输入会在结果中给出中心输入井的大小.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已经在本地解决了这个问题(参见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中,如果你设置display: table的.input-append.input-block-level > input,输入标签变得尽管采取焦点编辑.

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

Answer 2

我正在寻找类似的东西,这个解决方案来自https://gist.github.com/mattjorn/5020957为我工作 - 添加.input-block-level到你的外部div,例如,

<div class="input-prepend input-append input-block-level">

然后像这样扩展bootstrap CSS:

.input-prepend.input-block-level {
  display: table;
  width: 100%;
}

.input-prepend.input-block-level .add-on {
  display: table-cell;
  background-color: white;
}

.input-prepend.input-block-level > input {
  box-sizing: border-box;
  height: 30px;
  display: table-cell;
  width: 100%;
  border-left-style: none;
}