我在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
属性,它会完全弄乱它的外观。
有没有人知道可能导致问题的原因是什么?
答案 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>
答案 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
,现在所有人都正确对齐。