Question

我在模态对话框中使用输入组。按钮比其他元素少1px。我该如何修复它，更不用说为什么我有这个bug呢？我使用Bootstrap 3

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="buttons input-group col-sm-offset-1 col-sm-9">
    <input type="number" min="1" value="1" class="form-control" />
    <span class="input-group-addon">ks</span>
    <span class="input-group-btn">
        <button type="button" class="btn btn-default glyphicon glyphicon-remove color-red"/>
    </span>
</div>

＆＃13;

Answer 1

对我来说，这个错误是因为舍入错误。

有这种风格规则

.btn {
    line-height: 1.42857;
}

应该是

.btn {
    line-height: 1.42857143;
}

在其他SASS文件中导出导入引导导致精度损失。 SASS编译过程需要标志--precision 8才能正常工作。

但是，正如另一个答案所述，您只需要将图标放在另一个标签中。

<span class="input-group-btn">
    <button type="button" class="btn btn-default color-red">
        <span class="glyphicon glyphicon-remove"></span>
    </button>
</span>

Answer 2

我今天遇到了这个问题，通过一些谷歌搜索和实验，似乎使用glyphicon的正确方法是始终在其自己的范围内使用图标类，而不是将其与其他类/组件结合使用。 / p>

如果你的榜样;你会做以下事情：

<span class="input-group-btn">
    <button type="button" class="btn btn-default color-red">
        <span class="glyphicon glyphicon-remove"></span>
    </button>
</span>

有了这个，就不需要改变任何风格。

Answer 3

它是由在按钮上使用glyphicon引起的，并且似乎是引导程序的错误。使用

 .input-group-btn>.glyphicon {margin-top: -1px;}

修复它。

http://fiddle.jshell.net/85m5mwsg/2/

Answer 4

删除.glyphicon

的顶部

http://jsbin.com/dufisukefe/3/edit

.input-group-btn .glyphicon
{
top :0px
}

Bootstrap输入组1px差异

4 个答案: