Bootstrap 3.0.x - 如何在使用glyphicons的时候抑制输入组的输入宽度？ [英] Bootstrap 3.0.x - How to unconstrain input-group input width when using glyphicons?

问题描述

使用 input-groups 的行为发生了变化，在 bootstrap-3.0.0 和引导程序-3.0.1及以上版本之间使用 glyphicons / p>



从bootstrap-3.0.1开始，向输入组添加一个 glyphicon / code>导致输入宽度受到限制。

我有两个 input-groups ：一个用 glyphicon-user ，另一个用ascii @ sign。

新行为：

从图中可以看出在 bootstrap-3.0.1及以上中， input-group 的宽度与 glyphicon-user 被约束，而具有 @ 符号的则不是。

=https://f.cloud.github.com/assets/6157939/1917619/f68dc1f4-7d9e-11e3-8fc5-8056a349fb10.pngalt =bootstrap-3 0 3> p>

问题：

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

解决方案

字形类别不能与任何其他类别一起使用。

因此，通过将 input-group-addon 类和 glyphicon 类分隔开他们自己的跨度，它很容易修复并且产生正确的结果：

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

jsfiddle demo

大红色警告中说明：

不要与其他组件混合

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

Not sure if this is a feature or a bug...

There has been a change in behaviour with input-groups using glyphicons between bootstrap-3.0.0 and bootstrap-3.0.1 and above.

Starting from bootstrap-3.0.1, adding a glyphicon to an input-group causes the input width to be constrained.

I have two input-groups: one with a glyphicon-user, the other with an ascii @ sign.

New behaviour:

As can be seen from the image below, with bootstrap-3.0.1 and above, the width of the input-group with a glyphicon-user is constrained, while the one with an @ sign is not.

jsfiddle of the above issue with bootstrap-3.0.3 (behaviour is the same with 3.0.1 and 3.0.2)

Old behaviour:

On the other hand, as can be seen from the image below, the previous behaviour with bootstrap-3.0.0 meant the width of the input-group with a glyphicon-user was not constrained, thereby matching the one with an @ sign.

jsfiddle of the above with bootstrap-3.0.0

Question:

How can I get the bootstrap-3.0.0 behaviour (unconstrained input-groups when using glyphicons)?

解决方案

Glyphicon classes cannot be used with any other classes.

So by separating the input-group-addon class and glyphicon class into their own spans, it is easily fixed and yields correct results:

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

jsfiddle demo

The documentation even says so in a big red warning! :(

Don't mix with other components

Icon classes cannot be combined with other elements. They are designed to be standalone elements.

这篇关于Bootstrap 3.0.x - 如何在使用glyphicons的时候抑制输入组的输入宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！