twitter-bootstrap 引导程序。前置和附加输入。如何最大输入字段宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13306670/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap. Prepended and appended input. How to max input field width?
提问by Astro
I am using Bootstrap from twitter. What I want is to make a prepended text, and input field and a button, but I want my input field have the max available width so that the right edge of the submit button was near the right edge of the well. From the bootstrap documentation there is the .input-block-levelclass that lets any or element behave like a block level element, but applying it to the input gives in result the central input the size of the well. http://jsfiddle.net/Uc4CE/
我正在使用 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>
采纳答案by A Lee
I was looking for something similar and this solution from https://gist.github.com/mattjorn/5020957worked for me - add .input-block-levelto your outer div, e.g.,
我正在寻找类似的东西，来自https://gist.github.com/mattjorn/5020957 的这个解决方案对我有用 - 添加.input-block-level到你的外部 div，例如，
<div class="input-prepend input-append input-block-level">
<div class="input-prepend input-append input-block-level">
and then extend the bootstrap CSS like this:
然后像这样扩展引导 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;
}
回答by smajl
EDIT : Please note, that this answer is valid for Bootstrap v2.3.x. Bootstrap 3 already solves this natively (see doc).
编辑：请注意，此答案对 Bootstrap v2.3.x 有效。Bootstrap 3 已经在本地解决了这个问题（参见文档）。
Inspired by A lee's answer, here is my kinda improved solution(includes both append and prepend, minimum possible add-on width, removed unnecessary styles, auto height...). Include this after Bootstrap CSS/LESS files:
受 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;
}
Use it like this in your HTML and remember, you have to use atagsnot buttonfor your buttons in this case:
在你的 HTML 中像这样使用它并记住，在这种情况下你必须使用a标签而不是button你的按钮：
<div class="input-append input-block-level">
<input type="text" />
<a class="btn add-on">click</a>
</div>
Edit:In IE8, if you set display: tablein .input-append.input-block-level > input, the input tag becomes uneditable despite taking focus.
编辑：在 IE8 中，如果您display: table在 中设置.input-append.input-block-level > input，即使获得焦点，输入标签也会变得不可编辑。
Completely omitting this display:parameter makes it work as expected in IE8 as well as current Chrome/Safari/Firefox.
完全省略此display:参数使其在 IE8 以及当前的 Chrome/Safari/Firefox 中按预期工作。
回答by Alex Zhdanov
may be use for div class="input-prepend input-append"additional style margin-right
可用于div class="input-prepend input-append"其他样式margin-right
result for your code:
您的代码的结果：
<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>
回答by snakesNbronies
There is a fix for this in the 3.0 branch of Twitter Bootstrap as per @mdo's comment on this issue.
根据@mdo 对此问题的评论，在Twitter Bootstrap 的 3.0 分支中对此进行了修复。
However, I use the following javascript in my projects in the meantime when I output a django-crispy formslayout within a <div class="span4">. This accounts for responsive designs.
但是，当我django-crispy forms在<div class="span4">. 这说明了响应式设计。
example HTML
示例 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
修复.js
NOTE: I trigger this with window resizings as well.
注意：我也通过调整窗口大小来触发此操作。
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(); });
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(); });
