Question

我在Twitter上使用Bootstrap。我想要的是制作一个前置文本，输入字段和一个按钮，但我希望我的输入字段具有最大可用宽度，以便提交按钮的右边缘靠近井的右边缘。从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已经在本地解决了这个问题（see doc）。

受到李的回答的启发，这是我的改进的解决方案（包括追加和前置，最小可能的附加宽度，删除不必要的样式，自动高度......）。在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;
}

Answer 3

可用于div class="input-prepend input-append"其他样式margin-right

您的代码的结果：

<div class="well">
    <div class="input-prepend input-append" style="margin-right: 108px;">
        <span class="add-on">Some text</span>
        <input class="input-block-level" type="text" name="xxx" value="xxx" />
        <input type="hidden" name="next" value="xxx" />
        <input type="submit" value="xx" class="btn btn-info" />
    </div>
</div>

http://jsfiddle.net/Uc4CE/1/

Answer 4

根据@mdo's comment on this issue，在Twitter Bootstrap的3.0分支中有一个修复程序。

但是，当我在django-crispy forms内输出<div class="span4">布局时，我在我的项目中使用以下javascript。这说明了响应式设计。

示例HTML

<div class="row-fluid">
    <div class="span4">
        {% crispy form %}
    </div>
</div>

<强>的style.css

/* I also set this to account for smaller widtsh */

form fieldset {
    width:100%
}

<强> fix.js

注意：我也会通过窗口限制来触发此操作。

function sizeInputs（）{
  var fw = $（'form fieldset'）。innerWidth（）;
  $（'form .input-prepend'）。each（function（）{       $（this）.children（'input'）。css（'width'，fw - $（this）.children（'。add-on'）。innerWidth（））; }）; };

$（document）.ready（function（）{sizeInputs（）;}）;

$（window）.resize（function（）{sizeInputs（）;}）;

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

4 个答案: