如何在Twitter引导3中心按钮？

Question

我正在推特引导中构建一个表单，但是我在表单输入下方的按钮居中时遇到了问题。我已经尝试将中间块类应用于按钮，但没有成功。我该如何解决这个问题？

这是我的密码。

<!-- Button -->
<div class="form-group">
    <label class="col-md-4 control-label" for="singlebutton"></label>
    <div class="col-md-4">
        <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">
            Next Step!
        </button>
    </div>
</div>

Answer 1

<div class="row">
  <div class="col-sm-12">
    <div class="text-center">
      <button class="btn btn-primary" id="singlebutton"> Next Step!</button>
    </div>
  </div>
</div>

Answer 2

根据Twitter引导文档：http://getbootstrap.com/css/#helper-班级中心

<!-- Button -->
<div class="form-group">
   <label class="col-md-4 control-label" for="singlebutton"></label>
   <div class="col-md-4 center-block">
      <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">
          Next Step!
       </button>
   </div>  
</div>

类cent-block所做的只是告诉元素的边距为0，自动边距是左/右边距。但是，除非在父类上设置了文本中心或css文本对齐：中心；类，否则元素不知道从哪里算出自动计算，因此不会像预期的那样使自己居中。

请参见上面的代码示例：https://jsfiddle.net/Seany84/2j9pxt1z/

Answer 3

用“文本中心”类在div中包装按钮。

只要改变这个：

<!-- wrong -->
<div class="col-md-4 center-block">
    <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">Next Step!</button>
</div>

对此：

<!-- correct -->
<div class="col-md-4 text-center"> 
    <button id="singlebutton" name="singlebutton" class="btn btn-primary">Next Step!</button> 
</div>

编辑

从BootstrapV4开始，中心块被删除#19102，取而代之的是m-*-auto