html - 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>

如果不在 input-group 上明确定义 width: 100%，我似乎无法让我的输入组跨越 100%。请注意，我稍微调整了标记:

<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; }

我创建了一个 fiddle 来表示这个问题:http://jsfiddle.net/Wexcode/B9LMN/

Answer 1

将 width: 1% 添加到 input 元素的兄弟元素可以解决这个问题:

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

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