2016-03-21 36 views
1

我有以下Bootstrap单选按钮组,其中标签高度与值的不同。如何在Bootstrap单选按钮组中制作相同高度的标签和值

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 
 

 
<div class="input-group input-group-lg"> 
 
    <span class="input-group-addon" id="addon-title">Type</span> 
 
    <div class="btn-group" data-toggle="buttons"> 
 
     <label class="btn btn-primary active"> 
 
      <input type="radio" name="eventType" value="one"> One 
 
     </label> 
 
     <label class="btn btn-primary"> 
 
      <input type="radio" name="eventType" value="two"> Two 
 
     </label> 
 
     <label class="btn btn-primary"> 
 
      <input type="radio" name="eventType" value="three"> Three 
 
     </label> 
 
     <label class="btn btn-primary"> 
 
      <input type="radio" name="eventType" value="four"> Four 
 
     </label> 
 
    </div> 
 
</div>

我怎样才能改变它,以便没有在标签和价值观的高度没有差距?

回答

3

尝试为示例中的标签使用.btn-lg类。

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 
 

 
<div class="input-group input-group-lg"> 
 
    <span class="input-group-addon" id="addon-title">Type</span> 
 
    <div class="btn-group" data-toggle="buttons"> 
 
     <label class="btn btn-primary btn-lg active"> 
 
      <input type="radio" name="eventType" value="one"> One 
 
     </label> 
 
     <label class="btn btn-primary btn-lg"> 
 
      <input type="radio" name="eventType" value="two"> Two 
 
     </label> 
 
     <label class="btn btn-primary btn-lg"> 
 
      <input type="radio" name="eventType" value="three"> Three 
 
     </label> 
 
     <label class="btn btn-primary btn-lg"> 
 
      <input type="radio" name="eventType" value="four"> Four 
 
     </label> 
 
    </div> 
 
</div>

相关问题