自举输入基团的附加不垂直取向(Bootstrap input-group-addon Not Ver

我使用的是与引导下列标记：

<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:

.glyphicon {
    top: 1px;
}

更改为top:0px; 或添加style="top:0px;" 顶你的跨度

Answer 2:

试着像上面输入此输入组插件和地点广度一些事情

<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 3:

你的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类的<i>你的内span ，现在都对准正确。

文章来源: Bootstrap input-group-addon Not Vertically Aligned