將圖標中斷添加到引導輸入時

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>