19

我正在使用来自 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>
4

4 回答 4

14

编辑：请注意，这个答案对 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 中按预期工作。

于 2013-07-04T09:03:49.770 回答
12

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

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

然后像这样扩展引导 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;
}
于 2013-04-02T22:07:15.767 回答
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/

于 2012-11-09T11:05:14.487 回答
0

根据@mdo 对此问题的评论，在Twitter Bootstrap 的 3.0 分支中对此进行了修复。

但是，与此同时，当我django-crispy forms在<div class="span4">. 这说明了响应式设计。

示例 HTML

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

样式.css

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

form fieldset {
    width:100%
}

修复.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(); });

于 2013-04-18T06:24:36.537 回答