Bootstrap。预先和附加输入。如何最大化输入字段宽度？

Question

我正在使用Twitter的Bootstrap。我想要的是制作一个前置文本，输入字段和一个按钮，但我希​​望我的输入字段具有最大可用宽度，以便提交按钮的右边缘靠近井的右边缘。自举文档中有。输入块级类，它允许任何元素或元素的行为类似于块级元素，但将其应用于输入会导致中心输入的大小。 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

我一直在寻找类似的东西，并从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; 
} 

Answer 2

可能是使用了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 3

有一个在3.0分支Twitter的引导的按@mdo's comment on this issue此修复。

但是，在我输出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

注：我也触发此窗口resizings以及。

功能sizeInputs（）{
变种FW = $（ '形式字段集'）innerWidth（）; （'.input-prepend'）。each（function（）{（this）.children（'input'）。css（'width'，fw - $（this）.children（'。add -on'）。innerWidth（））;}）; };

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

$（窗口）。resize（function（）{sizeInputs（）;}）;

Answer 4

编辑：请注意，这个答案适用于Bootstrap v2.3.x. Bootstrap 3已经在本地解决了这个问题（see doc）。

由李某的回答启发，这是我还挺改进方案（包括追加和前插，最小可能的附加宽度，去掉不必要的风格，汽车高度......）。后引导CSS /减档包含此：

.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中按预期工作。