Bootstrap输入组附加组件未垂直对齐 [英] Bootstrap input-group-addon Not Vertically Aligned

问题描述

我在Bootstrap中使用以下标记:

I'm using the following markup with Bootstrap:

<div class="row">

    <label class="col-md-4">Date of Completion of Checklist</label>

    <div class="col-md-4">
        <div class="input-group">
            <input type="text" class="form-control datepicker">
            <span class="input-group-addon glyphicon glyphicon-calendar"></span>
        </div>
    </div>

</div>

我在单独的文件中有一些自己的CSS，包括:

I have some of my own CSS in a separate file, including:

.form-control {
    border-color: #000;
    border-radius: 0;
    box-shadow: none;
}

.form-control:focus {
    border-color: #009966;
}

label {
    font-weight: bold;
    margin-top: 8px;
}

.input-group-addon {
    background: #fff;
    border-color: #000;
}

但是，即使我删除了整个自定义样式表，仍然会看到此垂直对齐问题，您可以在下面看到:

However, even when I remove my whole custom stylesheet, I am still presented with this vertical alignment issue you can see below:

看起来应该比原来少1像素.我尝试将位置设置为relative并设置bottom: 1px，但是它似乎没有变化.

It looks like it's 1 pixel off what it should be. I've tried setting the positioning to relative and set bottom: 1px however it doesn't appear to budge.

如果我删除vertical-align属性，则会完全弄乱它的外观.

If I remove the vertical-align property it completely messes up the look of it.

有人知道导致问题的原因吗?

Does anyone have an idea what could be causing the problem?

推荐答案

.glyphicon {
    top: 1px;
}

将此更改为top:0px;或在您的跨度顶部添加style="top:0px;"

change this to top:0px; or add style="top:0px;" top your span

这篇关于Bootstrap输入组附加组件未垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！