19 
<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。

4

6 に答える 6

59

Bootstrapで要素を配置するためのネイティブな方法は、を使用することoffsetです。12列のレイアウトを使用していると仮定します。

ブートストラップ2

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

ドキュメントの詳細情報

ブートストラップ3

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

ドキュメントの詳細情報

于 2012-08-29T07:41:18.237 に答える
19

投稿された両方の回答は有効で機能しているので、私はそれらに賛成しました。これは私が投稿されたのを見なかった別の方法です。

フォームをに設定し、を使用してコンテナdisplay:inline-block内で中央に配置することにより、フォームを中央に配置できます。このように、フォームはそのコンテナ内の幅に関係なく中央に配置されます。.centertext-align:center

CSS

.center {
    text-align:center;
}

.center form {
    display:inline-block;
}
于 2012-08-29T11:08:55.750 に答える
7

これが私の答えを見つけた場所です。

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;
}
于 2013-06-03T06:40:46.213 に答える
4

これを試しましたか？

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

これは私にとって簡単で迅速な解決策です。

于 2013-05-08T19:09:26.683 に答える
3

古き良きCSSのようなものはありませんか？

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

そしてに変更.span6します.span12

ここでJsfiddle 。</ p>

于 2012-08-29T07:25:05.883 に答える
-1 
<div class="container">

フォームのコーディング

</div>

于 2013-05-29T17:45:34.997 に答える