2016-03-21 4 views
1

ラベルの高さが値と異なる次のブートストラップラジオボタングループがあります。ブートストラップラジオボタングループで同じ高さのラベルと値を作成する方法

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>

関連する問題