如何在 Twitter Bootstrap 3 中居中按钮？

小编典典

如何在 Twitter Bootstrap 3 中居中按钮？

all

我正在 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>

阅读 89

2022-05-12

共1个答案

小编典典

使用“text-center”类将 Button 包装在 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 开始，center- block已放弃#19102以支持m-*-auto

2022-05-12