如何在推特引导3中心按钮?

你可以通过给这些元素一定的边距来实现。

例如

.button{
margin:0px auto; //it will center them
}

0px从上到下，auto从左到右。

使用text-align: center css属性

根据Twitter Bootstrap文档:http://getbootstrap.com/css/#helper-classes-center

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

center-block类所做的就是告诉元素的边距为0 auto, auto是左/右边距。但是，除非类text-center或css text-align:center;设置在父元素上，元素不知道从哪个点进行自动计算，因此不会像预期的那样居中。

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

用“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>

编辑

从BootstrapV4开始，center-block被# 19102替换为m-*-auto

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

或者你可以通过简单的自举网格系统，给出特定的偏移量来设置按钮的位置，

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

您可以执行以下操作。它还避免了按钮重叠。

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

这对我有用 尝试创建一个独立的__abc0，然后将button放入其中。 就像这样:

<div id="contactBtn">
<button type="submit" class="btn btn-primary ">Send</button>
</div>

然后转到你的CSSStyle页面，像这样做Text-align:center:

#contactBtn{text-align: center;}

我尝试了下面的代码，它为我工作。

<button class="btn btn-default center-block" type="submit">Button</button>

按钮控件在一个div和使用中心块类的bootstrap帮助我将按钮对齐到div的中心

检查链接，您将找到中心块类

http://getbootstrap.com/css/#helper-classes-center

为你的风格添加:

<div class="container-fluid">
<div class="col-sm-12 text-center">
<button class="btn btn-primary" title="Submit"></button>
<button class="btn btn-warning" title="Cancel"></button>
</div>
</div>

Bootstrap 4更新:

用'd-flex'和'justify-content-center'实用工具类包装一个div集的按钮，以利用flexbox。

<!-- Button -->
<div class="form-group">
<div class="d-flex justify-content-center">
<button id="singlebutton" name="singlebutton" class="btn btn-primary">
Next Step!
</button>
</div>
</div>

使用flexbox的好处是能够在同一轴上添加额外的元素/按钮，但它们有自己的单独对齐方式。它还提供了使用“align-items-start/center/end”类进行垂直对齐的可能性。

您可以用另一个div包装标签和按钮，以保持它们彼此对齐。

例如https://codepen.io/anon/pen/BJoeRY?editors=1000

引导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

更多信息: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 = "col-xs-8 text-center">

margin: auto;

这似乎解决了问题。