我在Bootstrap 3工作,我试图在输入框的右侧获得一个日历图标.
我的HTML看起来像这样：
<div class="col-md-12">
<div class='right-inner-addon col-md-2 date datepicker'
data-date-format="yyyy-mm-dd">
<input name='name' value="" type="text" class="form-control date-picker"
data-date-format="yyyy-mm-dd"/>
<i class="fa fa-calendar"></i>
</div>
</div>
我试过这个位置：绝对是这样的：
.right-inner-addon i {
position: absolute;
right: 5px;
top: 10px;
pointer-events: none;
font-size: 1.5em;
}
.right-inner-addon {
position: relative;
}
但是当我这样做时,它会在一个地方看起来很棒,但在另一个实例中不能正确定位.
我还试图看看我是否可以使用text-indent来查看它是否会在整个过程中起作用,但它具有相同的效果.
.right-inner-addon i,.form-group .right-inner-addon i {
display: inline-block;
z-index: 3;
text-indent: -15px;
font-size: 1.3em;
}
解决方法
您可以将输入组加载项与input-group-btn一起使用.
<div class="col-md-12">
<div class='input-group add-on col-md-2 date datepicker'
data-date-format="yyyy-mm-dd">
<input name='name' value="" type="text" class="form-control date-picker"
data-date-format="yyyy-mm-dd"/>
<div class="input-group-btn">
<button class="btn btn-default">
<i class="fa fa-calendar"></i>
</button>
</div>
</div>
</div>
用一点CSS来隐藏按钮边框：
/* remove border between controls */
.add-on .input-group-btn > .btn {
border-left-width: 0;
left:-2px;
-webkit-Box-shadow: inset 0 1px 1px rgba(0,0.075);
Box-shadow: inset 0 1px 1px rgba(0,0.075);
}
/* stop the glowing blue shadow */
.add-on .form-control:focus {
-webkit-Box-shadow: none;
Box-shadow: none;
border-color:#cccccc;
}
