Wie man Label und Werte gleicher Höhe in Bootstrap Radio Button Group

Question

Ich habe die folgenden Bootstrap Radio Button-Gruppe, wo die Label-Höhe unterscheidet sich von denen der Werte.

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>

Wie kann ich es ändern, so dass es keine Lücke in Höhe des Etiketts und Werte?

Answer 1

Versuchen Sie, die .btn-lg-Klasse für die Beschriftungen wie im Beispiel zu verwenden.

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>