Bootstrap input-group-addon不垂直对齐

时间:2015-06-19 12:39:06

标签: css forms twitter-bootstrap textfield

我在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;
}

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

enter image description here

它看起来像应该是1像素。我已经尝试将定位设置为relative并设置bottom: 1px,但它似乎没有让步。

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

有没有人知道可能导致问题的原因是什么?

3 个答案:

答案 0 :(得分:1)

.glyphicon {
    top: 1px;
}

将此更改为top:0px;或将style="top:0px;"添加到您的范围

答案 1 :(得分:0)

尝试像input-group-addon这样的东西并将span放在输入

之上
<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

答案 2 :(得分:0)

将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,现在所有人都正确对齐。