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

您不需要使用內聯樣式，只需應用已包含在引導程序中的“text-center”類

Answer 2

編輯：Guillemo Mansilla的答案更好。 相同的技術，但更好地使用現有的Bootstrap類。

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

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

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

Answer 3

Bootstrap 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/#horizo​​ntal-centering