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>

我创建了一个 Fiddle 并为其中一个 div 突出显示了不同颜色的背景，以便您可以看到缺少居中： https://jsfiddle.net/rovh1fcw/3/

感谢您的帮助！我确定这是我忽略的一些简单的事情。

Answer 1

text-center 类现在在 Bootstrap 4 alpha 中是 text-xs-center。还要从列中删除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>

演示： 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/