Bootstrap 3.0.x - 如何在使用glyphicons时不输入输入组输入宽度？

Question

不确定这是一个功能还是一个错误......

在 bootstrap-3.0.0 和 bootstrap-3.0.1及以上之间使用input-groups的{​​{1}}行为发生了变化

从bootstrap-3.0.1开始，向glyphicons添加glyphicon会导致input-group宽度受到限制。

我有两个input：一个有input-groups，另一个带有ascii glyphicon-user。

新行为：

从下图中可以看出，使用 bootstrap-3.0.1及更高版本，@的{​​{1}}宽度受限制，而input-group符号不是。

bootstrap-3.0.3 上述问题的

jsfiddle（行为与 3.0.1 和 3.0.2相同）

旧行为：

另一方面，从下图中可以看出， bootstrap-3.0.0 的先前行为意味着glyphicon-user的宽度为@没有约束，因此将其与input-group符号相匹配。

上面 bootstrap-3.0.0

的

jsfiddle

问题：

如何获得 bootstrap-3.0.0 行为（使用glyphicons时不受约束的输入组）？

Answer 1

似乎使用CSS选择器:empty在.glypicon上设置1em的宽度，该宽度覆盖默认宽度1％。我不确定它为什么会影响它，我认为这会以某种方式影响表格布局。

无论如何，你可以通过两种方式解决它。

覆盖形式为插件的项目的:empty样式：

.input-group-addon.glyphicon:empty {
  width: 1%;
}

<强> Demo

OR

将父级（display: table）设置为100％宽：

.input-group {
  width: 100%;
}

<强> Demo

Answer 2

Glyphicon类不能与任何其他类一起使用。

通过将input-group-addon类和glyphicon类分隔为自己的spans，可以很容易地修复它并产生正确的结果：

<span class="input-group-addon">
    <span class="glyphicon glyphicon-user"></span>
</span>

<强> jsfiddle demo

文档甚至在大红色警告中说明了这一点 :(

  

请勿与其他组件混用

     

图标类不能与其他元素组合。它们被设计为独立元素。

Answer 3

除了使用glyphicon或任何input-group-addon之外，我遇到了同样的问题。

当我在页面中有以下代码并且我不停地刷新页面时，我可以看到中间文本框试图扩展（闪烁）。如果我删除输入组，则行为相同。

<fieldset>
        <div class="form-group">
            <div class="input-group">
                <span class="input-group-addon">@</span>
                <input type="email"
                    class="form-control"                            
                    placeholder="Email address"
                />
            </div>
        </div>
        <div class="form-group">
            <div class="input-group" style="width: 100%">
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-user"></span>
                </span>
                <input type="text" 
                    class="form-control"                            
                    placeholder="Full name"
                />
            </div>
        </div>
        <div class="form-group">
            <div class="input-group">
                <span class="input-group-addon">@</span>
                <input type="email"
                    class="form-control"                            
                    placeholder="Email address"
                />
            </div>
        </div>
    </fieldset>

对我而言，所有关于所使用的类型，如果我将类型设置为文本或密码，宽度限制为它的原始大小。我尝试过Bootstrap 3.0.0和3.1.0。此行为也发生在Chrome 34.0.1847和Firefox 21.0上。