BootStrap CSS边距0自动不居中

Question

我目前正在使用BootStrap 3.我无法使按钮组成为中心.

HTML

<div class="container" style="margin-top:100px;">             
 <div class="btn-group" style="margin:0 auto">
     <button type="button" class="btn btn-default" >Left</button>
     <button type="button" class="btn btn-default" >Middle</button>
     <button type="button" class="btn btn-default" >Right</button>
 </div>
</div>

我该如何解决这个问题？

Answer 1

Bootstrap 4 使用

使用text-center或mx-auto或container-fluid

1. 您可以使用此 hack text-center（这不仅适用于文本）

2. 或者使用确切的 boostrap4 类 mx-auto

例如 class="text-center"或 class="mx-auto"

在上下文中

<div class="btn-group text-center"> or <div class="btn-group mx-auto">

尽量不要使用内联样式（不好的做法）

<div class="btn-group" style="margin:0 auto">

参考这里：

text-center=> https://getbootstrap.com/docs/4.0/utilities/text/

mx-auto=> https://getbootstrap.com/docs/4.0/utilities/spacing/#horizo​​ntal-centering

Answer 2

您不需要使用内联样式,只需应用已包含在引导程序中的"text-center"类

Answer 3

编辑：Guillemo Mansilla 的答案更好。相同的技术，但更好地利用现有的 Bootstrap 类。

您可以text-align: center在.container. 不需要margin: 0 auto.

.container {
  text-align: center;
  margin-top: 100px;
}

http://jsbin.com/oyaDokOw/2/edit