【问题标题】: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 的答案可能会有所帮助。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2023-03-27
      • 1970-01-01
      • 2016-10-23
      • 2014-09-14
      • 2014-12-23
      • 2014-09-07
      • 1970-01-01
      相关资源
      最近更新 更多