Bootstrap 输入组插件对齐问题答案

【问题标题】：Bootstrap input group addon alignment problemsBootstrap 输入组插件对齐问题
【发布时间】：2016-07-29 22:08:55
【问题描述】：

我的输入组插件与我的输入文本框不对齐...我做错了什么？

<div class="form-group">
    <label for="primary">Primary:</label>
    <div class="input-group">
        <span class="input-group-addon glyphicon glyphicon-earphone"></span>
        <input maxlength="20" class="form-control" name="primary" id="primary" placeholder="Primary" type="text">
    </div>
</div>

上面的代码呈现了这个：

插件比文本框低1px，但我不知道为什么！

http://www.bootply.com/iR1SvOyEGH

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

试试这个。

这个问题来自 chrome..

只是做一些改变

<div class="form-group">

        <div class="col-md-12">
        <div class="col-md-1">
            <label for="primary">Primary:</label>
            </div>
            <div class="col-md-4">
                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
                    <input maxlength="20" class="form-control" name="primary" id="primary" placeholder="Primary" type="text">
                </div>
            </div>


            </div>
        </div>

【讨论】：

谢谢，这修复了它...澄清一下，在外部 input-group-addon 标签内的 或标签中添加字形图标。

【解决方案2】：

这是一个简单的解决方法：glyphicon 在 css 中有一个默认类，顶部为 1px；

您需要通过创建自己的类或只是更改它（如果这是您使用 glyphicon 的唯一地方）来消除它。我不确定他们为什么默认这样做，但这肯定会让你的眼睛难过。整个事情在 css 中是这样的：

.glyphicon {
    position: relative;
    top: 1px;    <----------------------------- Here is your culprit
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

【讨论】：

更改 i 的 span 对我不起作用，正确的答案是移除 1px 顶部，这对 span 和 i 都有效。

【解决方案3】：

我修改了你的引导代码。 This 可能会做你想做的事。不要在您的父元素上添加 form-group 类，而是放置 input-group 类并将 label 移出它。

编辑：

抱歉，现在我看到了您的问题。问题是当您在输入组中使用字形图标时。这个stackoverflow 的答案可能会有所帮助。

【讨论】：