如何在twitter bootstrap中居形式？

Question

<div class="container">
    <div class="row">
        <div class="span6 center">
            <form>
                <table>
                    <tbody>
                        <td>foo</td>
                    </tbody>
                </table>
            </form>
        </div>
    </div>
</div>

的jsfiddle

注意:我使用的是抽象层,因此无法更改类<form>.

如何使用Twitter-Bootstrap使表单居中？

仅供参考:我也尝试过pagination-centred.

Answer 1

在Bootstrap中定位元素的本地方法是使用offset.我假设您使用的是12列布局.

Bootstrap 2

<div class="container">
    <div class="row">
        <div class="span6 offset3">
            <form>
                ...
            </form>
        </div>
    </div>
</div>

文档中的更多信息

Bootstrap 3

<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <form>
                ...
            </form>
        </div>
    </div>
</div>

文档中的更多信息

Answer 2

发布的两个答案都是有效且有效的,所以我对它们进行了投票.这是我没有看到的另一种方法.

您可以通过将表单设置为使用表单display:inline-block并将其置于.center容器中心来使表单居中text-align:center.这样,无论该容器内的宽度如何,表单都将居中:

CSS

.center {
    text-align:center;
}

.center form {
    display:inline-block;
}

Answer 3

这是我找到答案的地方.

/sf/answers/1055920351/

<div class="container">
  <div class="row">
    <div class="span9 centred">
      This div will be centred.
    </div>
  </div>
</div>

和CSS:

[class*="span"].centred {
  margin-left: auto;
  margin-right: auto;
  float: none;
}