Я работаю в 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>
Я пробовал position: absolute
следующим образом:
.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;
}