bootstrap input-group-btn忽略高度100％

Question

奇怪的樣式問題 - 我試圖獲得引導程序中'.input-group-btn'的高度以適應父容器'input-group'的高度。這將與旁邊的選擇框的整個高度一起運行。

簡單的問題，只是似乎無法得到所需的結果，它只設置'PX'爲基礎的固定值，並忽略％...我需要將其設置爲100％高度......怎麼樣？

<div class="col-xs-9"> 
     <div class="input-group add-on col-xs-2"> 
      <div class="input-group-btn"> 
         <a class="btn btn-default" data-toggle="popover" data-html="true" title="Container Size" data-content="mg"><span class="glyphicon glyphicon-question-sign"></span></a> 
      </div> 
      <div class="form-group container-select"> 
       <select id="hazards" multiple="multiple" name="hcode"> 
         <option>None</option> 
         <option>1</option> 
         <option>2</option> 
         <option>3</option>  
        </select> 
      </div> 
     </div> 
    </div> 

Fiddle With Me

Answer 1

你有一個問題是防止它被父母身高的100%一些多餘的垂直填充。

使用此CSS代替，

.input-group-btn > .btn{ 
    height: 100%; 
    padding: 0 20px; 
    margin: 0; 
} 

CODEPEN DEMO

這裏是格式化<select>組按鈕的正確引導的方式。

<div class="col-xs-9"> 
    <div class="input-group add-on col-xs-2"> 
     <span class="input-group-btn"> 
     <a class="btn btn-default" data-toggle="popover" data-html="true" title="Container Size" data-content="mg"><span class="glyphicon glyphicon-question-sign"></span></a> 
     </span> 
     <select id="hazards" name="code" class="selectpicker form-control"> 
     <option>none</option> 
     <option>1</option> 
     <option>2</option> 
     <option>3</option> 
     <option>4</option> 
     </select> 
    </div> 
</div> 

NEW CODEPEN DEMO