如何使用BootStrap水平居中表单？

Question

您好我在尝试使用BootStrap 2在屏幕中间放置一个登录表单.我已尝试使用偏移等的几种组合.但我似乎没有运气...

<div class="row-fluid">
    <form action='' method='POST' id='loginForm' class='form-horizontal' autocomplete='off'>
    ...
    </form>
</div>

关于我如何实现这一目标的任何建议？

Answer 1

如果你想使用网格系统,请按照@ Pickle的回答开始.这将使包含表单的跨区列居中.如果你希望表格在那个范围内居中,你将不得不做更多的工作,比如@kajo在你的问题评论中提到的事情.

要详细说明@Pickle的答案,这里有一些示例代码,它们在默认的12列网格中以4列的范围为中心.如果您需要跨越不同数量的列,请使用@ Pickle的公式(但请记住,您的跨栏列数必须是偶数)

<div class="container">
  <div class="row">
    <div class="offset4 span4">
      .. form goes here ..
    </div>
  </div>
</div>

Answer 2

通常所有跨度都向左浮动.因此,您必须将其浮动为无,然后将边距设置为自动.

像这样的东西:

 <div class="span8" style="float:none; margin:0 auto"></div>

Answer 3

只需将类设置为 2 * offsetClass + span class = 12 列。

IE：.offset4.span4