Bootstrap input-group-addon 未垂直对齐

Question

我在 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，包括：

.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;
}

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

它看起来比应有的少了 1 个像素。我试过将定位设置为 relative 并设置 bottom: 1px 但是它似乎没有移动。

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

有谁知道是什么导致了这个问题？

Answer 1

尝试像这个输入组插件这样的东西并将跨度放在输入上方

<div class="input-group">
    <span class="input-group-addon" id="basic-addon1"><i class="fa fa-calendar"></i></span>
    <input type="text" class="form-control datepicker" aria-describedby="basic-addon1">
</div>

http://getbootstrap.com/components/#input-groups

Answer 2

将您的 html 更改为此修复：

<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"><i class="glyphicon glyphicon-calendar"></i></span>
        </div>
    </div>

</div>

我已将 glyphicon glyphicon-calendar class 移动到 span 中的 <i>，现在可以正确对齐了。

Answer 3

.glyphicon {
    top: 1px;
}

将其更改为 top:0px; 或添加 style="top:0px;" 超出您的范围

Bootstrap input-group-addon 未垂直对齐

Bootstrap input-group-addon Not Vertically Aligned

css

forms

textfield

twitter-bootstrap