Question

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

Answer 1

使用bootstrap's native validation states可能比在此处编写自定义CSS更可取 ^{And I'm pretty sure that I'm the one who came up with the CSS in question}

只需在表单组中使用.has-feedback，在图标上使用.form-control-feedback：

<div class="form-group has-feedback">
    <label class="control-label sr-only">DatePicker</label>
    <input type="text" class="form-control date-picker" /> 
    <i class="fa fa-calendar form-control-feedback"></i>
</div>

Demo in jsFiddle

Answer 2

您可以将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

Answer 3

Check this fiddle，改编自this answer

不同之处在于<i>位于<input>之后。交换它们使它工作。这就是为什么定位造成混乱而不是引用的答案。

Answer 4

在上面的答案中，输入点击有效，但点击i标签不起作用。所以我在@KyleMit

的回答中添加了我的代码

<div class="form-group has-feedback">
  <input type="text" name="txtDatepicker" class="form-control date-picker" /> 
  <i class="glyphicon glyphicon-calendar" 
    onclick="javascript:$('input[name=txtDatepicker]').data('DateTimePicker').show();">
  </i>
</div>

我为我的UI改变了一点css。你也可以改变它。

<style>
  .right-inner-addon {
    position: relative;
   }

    .right-inner-addon input {
        padding-right: 30px;
    }

    .right-inner-addon i {
        position: absolute;
        left: 256px;
        padding: 14px 12px;
    }
</style>

Bootstrap 3在输入字段内放置图标

4 个答案:

Demo in jsFiddle