css - 如何使用 Bootstrap2 将 div 居中？

Question

http://twitter.github.com/bootstrap/scaffolding.html

我尝试了所有组合:

<div class="row">
  <div class="span7 offset5"> box </div>
</div>

或

<div class="container">
  <div class="row">
    <div class="span7 offset5"> box </div>
  </div>  
</div>

更改了跨度和偏移量数字...

但我无法在页面上完美地居中放置一个简单的框 :(

我只想要一个居中的 6 列宽的框...

---

编辑:

用

做了

<div class="container">
  <div class="row" id="login-container">
    <div class="span8 offset2">
       box
    </div>
  </div>
</div>

但是盒子太宽了，有什么办法可以用 span7 来做吗？

span7 offset2 给左边额外的填充 span7 offset3 额外的右边填充...

Answer 1

Bootstrap 的跨度向左浮动。使它们居中所需要做的就是覆盖此行为。我通过将其添加到我的样式表来做到这一点:

.center {
     float: none;
     margin-left: auto;
     margin-right: auto;
}

如果您定义了此类，只需将其添加到跨度即可。

<div class="span7 center"> box </div>

请注意，此自定义中心类必须在 Bootstrap css之后定义。您可以使用 !important 但不推荐这样做。