我在Twitter Bootstrap中构建一个表单，但我在窗体中输入下面的按钮居中有问题。我已经尝试将center-block类应用于按钮，但这并不奏效。我该如何解决这个问题?
这是我的代码。
<!-- 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>
当前回答
你可以通过给这些元素一定的边距来实现。
例如
.button{
margin:0px auto; //it will center them
}
0px从上到下，auto从左到右。
其他回答
用“text-center”类在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>
Edit
从BootstrapV4开始，中心块被删除了#19102，取而代之的是m-*-auto
或者你可以通过简单的自举网格系统，给出特定的偏移量来设置按钮的位置，
<div class="col-md-offset-4 col-md-2 col-md-offset-5">
<input type="submit" class="btn btn-block" value="submit"/>
这样，如果你设置了btn-block，也可以指定按钮大小。 当然，这只适用于md大小范围，如果你想设置其他大小，使用xs,sm,lg。
为你的风格添加:
显示:表; 保证金:0自动;
引导3
我们用列划分空间，我们使用8个小列(col-xs-8)，我们留下4个空列(col-xs-offset-4)，我们应用属性(center-block)
<!--Footer-->
<div class="modal-footer">
<div class="col-xs-8 col-xs-offset-4 center-block">
<button type="submit" class="btn btn-primary">Enviar</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
</div>
</div>
用于引导4
我们使用Spacing, Bootstrap包括一系列简化和填充的响应边距实用程序类来修改元素的外观。 类的命名格式为xs为{property}{sides}-{size}， sm、md、lg和xl为{property}{sides}-{breakpoint}-{size}。
更多信息请访问:https://getbootstrap.com/docs/4.1/utilities/spacing/
<!--Footer-->
<div class="modal-footer">
<button type="submit" class="btn btn-primary ml-auto">Enviar</button>
<button type="button" class="btn btn-danger mr-auto" data-dismiss="modal">Cerrar</button>
</div>
您可以执行以下操作。它还避免了按钮重叠。
<div class="center-block" style="max-width:400px">
<a href="#" class="btn btn-success">Accept</a>
<a href="#" class="btn btn-danger"> Reject</a>
</div>
