如何在 Twitter Bootstrap 3 中居中按钮? [英] How to center buttons in Twitter Bootstrap 3?

问题描述

我正在 Twitter Bootstrap 中构建一个表单，但我在将按钮居中放置在表单输入下方时遇到问题.我已经尝试将 center-block 类应用于按钮，但没有奏效.我应该如何解决这个问题?

这是我的代码.

<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">下一步！

解决方案

使用text-center"类将 Button 包裹在 div 中.

只要改变这个:

<div class="col-md-4 center-block"><button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">下一步！</button>

对此:

<div class="col-md-4 text-center"><button id="singlebutton" name="singlebutton" class="btn btn-primary">下一步！</button>

编辑

从 BootstrapV4 开始，center-block 被删除 #19102 支持 m-*-auto

I am building a form in Twitter Bootstrap but I'm having issues with centering the button below the input in the form. I have already tried applying the center-block class to the button but that didn't work. How should I fix this?

Here is my code.

<!-- 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>

解决方案

Wrap the Button in div with "text-center" class.

Just change this:

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

To this:

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

Edit

As of BootstrapV4, center-block was dropped #19102 in favor of m-*-auto

这篇关于如何在 Twitter Bootstrap 3 中居中按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！