Question

我需要在输入框的末尾添加日历图标，如示例中所示，但它会拉伸本地包装的高度，而我希望它是输入框的高度

http://codepen.io/anon/pen/bEEEzX?editors=110

  <div class="col-md-3 col-xs-12 ">
    <div class="input-group">
       <label>Start </label>
      <input type="text" class="form-control" placeholder="Start Date" aria-describedby="basic-addon2">
      <span class="input-group-addon glyphicon glyphicon-calendar" id="basic-addon2"></span>
    </div>
  </div>

如何更改它以使图标的高度与输入相同。

#basic-addon2{
  max-height:40px !important;
  width:30px;
  background-color:red;
  position:absolute;
  right:0;
  margin-bottom:-30px !important;
}

添加以上css也无济于事。

Answer 1

您执行错误，请再次检查bootstrap's documentation。您需要将图标放在input-group-addon 范围中，并且还会将其与错误的CSS混淆。检查共享代码段。

<span class="input-group-addon"><span class="glyphicon"></span></span>

#basic-addon2 {
  background-color: red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-3 col-xs-12 ">
  <label>Start</label>
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Start Date" aria-describedby="basic-addon2">
    <span class="input-group-addon" id="basic-addon2">
     <span class="glyphicon glyphicon-calendar"></span>
    </span>
  </div>
</div>

附加到bootstrap中的输入时图标会中断

1 个答案: