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中的“text-center”类

Answer 2

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

您可以在text-align: center上设置.container。无需margin: 0 auto。

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

<强> http://jsbin.com/oyaDokOw/2/edit

Answer 3

引导程序4的使用

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

1. 您可以使用此技巧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/#horizontal-centering