Html 引导程序 3 输入组 100% 宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23436430/
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 3 input-group 100% width
提问by Wex
In the bootstrap documentation, they have input groups that span 100% width with no additional markup: http://getbootstrap.com/components/#input-groups
在引导程序文档中，他们的输入组跨越 100% 的宽度，没有额外的标记：http: //getbootstrap.com/components/#input-groups
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
I can't seem to get my input groups to span 100% without explicitly defining width: 100%on input-group.Note that I've slightly adjusted the markup:
如果没有明确定义width: 100%on ，我似乎无法让我的输入组跨越 100% input-group。请注意，我稍微调整了标记：
<div class="input-group">
<input class="form-control" placeholder="Auto width" />
<div class="clear">
<a href="#" class="glyphicon glyphicon-remove"></a>
</div>
</div>
CSS:
CSS：
.clear { display: table-cell; }
I've created a fiddle to represent this problem: http://jsfiddle.net/Wexcode/B9LMN/
我创建了一个小提琴来代表这个问题：http: //jsfiddle.net/Wexcode/B9LMN/
回答by Wex
Adding width: 1%to the input element's sibling fixes this:
添加width: 1%到 input 元素的同级元素可以解决这个问题：
.clear { width: 1%; display: table-cell; }
回答by mcn
input-grouphas display: tablecss property, while the <input class="form-control"has display: table-cellcss property.
input-group具有display: tablecss 属性，而<input class="form-control"具有display: table-cellcss 属性。
<div class="input-group"> <!-- this is display: table -->
<input type="text" class="form-control"> <!-- this is display: table-cell -->
<span class="input-group-addon">.00</span> <!-- this is display: table-cell -->
</div>
According to HERE, under "Important Style Rules for Tables",
根据HERE，在“表格的重要样式规则”下，
Width works on table cells just about how you would think it does, except when there is some kind of conflict. For instance if you tell the table itself to be 400px wide then the first cell of a three-cell row to be 100px wide and leave the others alone, that first cell will be 100px wide and the other two will split up the remaining space.
it explains that if the widthof the child element that has table-cellis defined (let's say width: 100px), then the next child element with table-cellproperty, although not defined, will fill in the rest of the space.
它解释了如果width已经table-cell定义了子元素的 的（比方说width: 100px），那么下一个具有table-cell属性的子元素，虽然没有定义，将填充其余的空间。
回答by yPhil
One way to get an input-groupto stretch to full width seem to give one of its input-group-addon100% width:
一种将一个input-group拉伸到全宽的方法似乎给出了它的input-group-addon100% 宽度之一：
<div class="input-group" style="width:100%;">
<span class="one input-group-addon">one</span>
<span class="two input-group-addon">two</span>
<span class="tre input-group-addon" style="width:100%">tre</span> <!-- here -->
<span class="for input-group-addon">for</span>
<span class="fiv input-group-addon">fiv</span>
<span class="input-group-btn">
<button class="btn" type="button">x</button>
</span>
</div>
回答by Yevgeniy Afanasyev
If you have select2 as a part of your "input-group", you better create it with "resolve" parameter:
如果您将 select2 作为“输入组”的一部分，则最好使用“resolve”参数创建它：
$(document).ready(function() {
$("#myselect").select2({ width: 'resolve' });
});
回答by Scott Fell
<div class="container">
<h3>Form widths</h3>
<form role="form">
<div class="form-group">
<label>Auto width</label>
<div class="input-group">
<input class="form-control" placeholder="Auto width" /> <span class=
"input-group-addon"><a href="#" class="glyphicon glyphicon-remove"></a></span>
</div>
</div>
<div class="form-group">
<label>100% width</label>
<div class="input-group" style="width: 100%">
<input class="form-control" placeholder="100% width" /> <span class=
"input-group-addon"><a href="#" class="glyphicon glyphicon-remove"></a></span>
</div>
</div>
</form>
</div>
