css - Bootstrap 3将图标放置在输入字段中

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

Here's a jsFiddle that might help

最佳答案

您可以将input-group add-on与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, 0, 0.075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
/* stop the glowing blue shadow */
.add-on .form-control:focus {
    -webkit-box-shadow: none;
            box-shadow: none;
    border-color:#cccccc;
}

演示:http://bootply.com/128059

关于css - Bootstrap 3将图标放置在输入字段中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22913532/