css - 如何在 Twitter Bootstrap 上将框居中

Question

我正在布置一个登录屏幕，在该屏幕上将只有一个带有 LOGIN 和 PASSWORD 的框。我需要垂直和水平集中（就像任何传统的登录屏幕一样）。

如何使用 Twitter Bootstrap 实现这一目标？

谢谢！

Answer 1

If you are using bootstrap grid, then you can offset your columns:

<div class="row">
  <div class="span6 offset3">
     Your content goes here
  </div>
</div>

See example here: http://twitter.github.com/bootstrap/scaffolding.html#gridSystem

Or you can just use CSS to simply center block element,

div.login-box{
  margin:0 auto;
  width: 720px;
}

Answer 2

更新 Johny 的答案：对于 Bootstrap 3；语法有点不同：

<div class="row">
    <div class="col-sm-6 col-sm-offset-3">
        Your content goes here
    </div>
</div> 

或者：更好：

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-sm-offset-3">
            Your content goes here
        </div>
    </div>
</div>