bootstrap 3输入组100%宽度

Question

在bootstrap文档中,它们的输入组跨度为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>

如果没有明确定义width: 100%,我似乎无法使我的输入组跨越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:

.clear { display: table-cell; }

我创造了一个代表这个问题的小提琴:http://jsfiddle.net/Wexcode/B9LMN/

Answer 1

添加width: 1%到input元素的兄弟修复了这个问题:

.clear { width: 1%; display: table-cell; }

见http://jsfiddle.net/Wexcode/B9LMN/2/

Answer 2

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>

根据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. 

它解释了如果定义width了子元素table-cell(比如说width: 100px),那么具有table-cell属性的下一个子元素虽然没有定义,但会填充其余的空间.