如何在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>

documentation

中的更多信息

Bootstrap 3

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

documentation

中的更多信息

Answer 2

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

您可以将表单设置为display:inline-block，然后使用.center将其置于text-align:center容器中心，从而使表单居中。这样，无论该容器内的宽度如何，表单都将居中：

<强> CSS

.center {
    text-align:center;
}

.center form {
    display:inline-block;
}

Answer 3

这是我找到答案的地方。

https://stackoverflow.com/a/15084576/1140407

<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;
}

Answer 4

你试过这个吗？

.center form {
        display: table;
        margin: 0 auto;
    }

对我来说，这是一个简单快捷的解决方案。

Answer 5

没有什么比好的'CSS？

.center > form {
  width: 300px; // some amount to prevent using 100% width
  margin: 0 auto;
}

将.span6更改为.span12

Jsfiddle here。

Answer 6

<div class="container">

你编写表格

</div>