Bootstrap Eingabefelder sind Zentrierung nicht

Question

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

<div class="row"> 
 
    <div class="col-xs-12 text-center btn-group" data-toggle="buttons"> 
 
     <label class="btn btn-primary active"> 
 
      <input type="radio" name="measurement" value="far" checked="checked" /> F 
 
     </label> 
 
     <label class="btn btn-primary"> 
 
      <input type="radio" name="measurement" value="cel" /> C 
 
     </label> 
 
    </div> 
 
</div>

Ich bin nicht sicher, warum es linksbündig. Ich dachte, das text-center Klassenzentrum alles ausgerichtet? Und da es in einem div ist, das col-xs-12 ist, macht es das nicht zentriert? Oder was vermisse ich?

Answer 1

Der Schuldige ist die BTN-Gruppe. Sie müssen es in ein Div unter dem Text-Center verschieben. Der Code wird wie folgt aussehen:

<div class="row"> 
     <div class="col-xs-12 text-center" data-toggle="buttons"> 
      <div class="btn-group"> 
       <label class="btn btn-primary active"> 
        <input type="radio" name="measurement" value="far" 
        checked="checked" /> F 
       </label> 
       <label class="btn btn-primary"> 
        <input type="radio" name="measurement" value="cel" /> C 
       </label> 
      </div> 
     </div> 
    </div>