Bootstrap 4行中的中心複選框按鈕

Question

我想將複選框作爲Bootstrap中的按鈕居中。我試過在周圍div和輸入內使用「text-center」和「center-block」，但沒有任何效果。 （您可以在每個在許多地方使用「文本中心」和「中心塊」的例子中看到。）

HTML：

<div class="row grade-selection"> 
     <div class="col-xs-1"></div> 
     <div class="col-xs-2 btn-group text-center" data-toggle="buttons"> 
     <label class="btn btn-primary"> 
      <input type="checkbox" autocomplete="off">K</label> 
     </div> 
     <div class="col-xs-2 btn-group" data-toggle="buttons"> 
     <label class="btn btn-primary text-center"> 
      <input type="checkbox" autocomplete="off">1</label> 
     </div> 
     <div class="col-xs-2 btn-group" data-toggle="buttons"> 
     <label class="btn btn-primary"> 
      <input class="text-center" type="checkbox" autocomplete="off">2</label> 
     </div> 
     <div class="col-xs-2 btn-group center-block" data-toggle="buttons"> 
     <label class="btn btn-primary"> 
      <input type="checkbox" autocomplete="off">3</label> 
     </div> 
     <div class="col-xs-2 btn-group" data-toggle="buttons"> 
     <label class="btn btn-primary center-block"> 
      <input type="checkbox" autocomplete="off">4</label> 
     </div> 
     <div class="col-xs-1"></div> 
    </div> 
    <div class="row grade-selection"> 
     <div class="col-xs-1"></div> 
     <div class="col-xs-2 btn-group" data-toggle="buttons"> 
     <label class="btn btn-primary"> 
      <input class="center-block" type="checkbox" autocomplete="off">5</label> 
     </div> 
     <div class="col-xs-2 btn-group" data-toggle="buttons"> 
     <label class="btn btn-primary active"> 
      <input type="checkbox" checked autocomplete="off">6</label> 
     </div> 
     <div class="col-xs-2 btn-group" data-toggle="buttons"> 
     <label class="btn btn-primary active"> 
      <input type="checkbox" checked autocomplete="off">7</label> 
     </div> 
     <div class="col-xs-2 btn-group" data-toggle="buttons"> 
     <label class="btn btn-primary"> 
      <input type="checkbox" autocomplete="off">8</label> 
     </div> 
     <div class="col-xs-2 btn-group" data-toggle="buttons"> 
     <label class="btn btn-primary"> 
      <input type="checkbox" autocomplete="off">9</label> 
     </div> 
     <div class="col-xs-1"></div> 
    </div> 
    <div class="row grade-selection"> 
     <div class="col-xs-3"></div> 
     <div class="col-xs-2 btn-group" data-toggle="buttons"> 
     <label class="btn btn-primary"> 
      <input type="checkbox" autocomplete="off">10</label> 
     </div> 
     <div class="col-xs-2 btn-group" data-toggle="buttons"> 
     <label class="btn btn-primary"> 
      <input type="checkbox" autocomplete="off">11</label> 
     </div> 
     <div class="col-xs-2 btn-group" data-toggle="buttons"> 
     <label class="btn btn-primary"> 
      <input type="checkbox" autocomplete="off">12</label> 
     </div> 
     <div class="col-xs-3"></div> 
    </div> 

    </div> 
</div> 

我創建了一個小提琴，並強調背景爲其中一個div設置了不同的顏色，以便您可以看到缺少居中： https://jsfiddle.net/rovh1fcw/3/

感謝您的幫助！我確信這是我忽略的簡單事情。

Answer 1

的text-center類現在text-xs-center是在自舉4的α。同時刪除您列btn-group，因爲這是導致按鈕內嵌顯示..

<div class="col-xs-2 text-xs-center" data-toggle="buttons"> 
     <label class="btn btn-primary text-xs-center"> 
     <input type="checkbox" autocomplete="off">1</label> 
</div> 

DEMO：http://www.codeply.com/go/ZjGIIW1qeQ

More on upgrading to Bootstrap 4

Answer 2

div[data-toggle]{ 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
    justify-content: center; 
    align-items: center; 
} 

https://jsfiddle.net/rovh1fcw/18/