Question

奇怪的样式问题 - 我试图在bootstrap中获得'.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

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

1 个答案: