如何使用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>

请注意,必须在引导程序css 之后定义此自定义中心类.您可以使用,!important但不建议这样做.

Answer 2

除了通过减少像这样跨度的大小股利本身萎缩到你想要的大小,... class="span6 offset3",class="span4 offset4"等等......东西一样简单style="text-align: center"的DIV可以有你要找的效果

你不能使用任何设置偏移的span7并在页面上居中(因为总跨度= 12)

Answer 3

Bootstrap3具有.center-block您可以使用的类.它被定义为

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

文档在这里.

Answer 4

如果你想要全自动引导(而不是自动左/右方式),你需要一个适合12列的模式,例如2个空白,8个内容,2个空白.这就是这个设置会做的事情.它只涵盖-md-变体,我倾向于通过添加col-xs-12将其捕捉到小尺寸

<div class="container">
  <div class="col-md-8 col-md-offset-2">
     box
  </div>
</div>

Answer 5

听起来你只想中心对齐一个容器.引导框架可能过于复杂的一个例子,你可能只有一个独立的div与你自己的样式,如:

<div class="login-container">
  <!-- Your Login Form -->
</div>

和风格:

.login-container {
  margin: 0 auto;
  width: 400px; /* Whatever exact width you are looking for (not bound by preset bootstrap widths) */
}

如果你嵌套在bootstrap .containerdiv中的某个地方,这应该可以正常工作.