84

http://twitter.github.com/bootstrap/scaffolding.html

私はすべての組み合わせのように試しました：

<div class="row">
  <div class="span7 offset5"> box </div>
</div>

また

<div class="container">
  <div class="row">
    <div class="span7 offset5"> box </div>
  </div>  
</div>

スパン番号とオフセット番号を変更しました...

しかし、ページの中央に完全に配置された単純なボックスを取得できません:(

幅6列のボックスを中央に配置したいだけです...

編集：

でやった

<div class="container">
  <div class="row" id="login-container">
    <div class="span8 offset2">
       box
    </div>
  </div>
</div>

しかし、ボックスが広すぎます。 span7 でそれを行う方法はありますか?

span7 offset2左にspan7 offset3追加のパディングを追加し、右に追加のパディングを追加します...

4

9 に答える 9

165

Bootstrap のスパンは左にフロートされます。それらを中央に配置するために必要なのは、この動作をオーバーライドすることだけです。これをスタイルシートに追加することでこれを行います。

.center {
     float: none;
     margin-left: auto;
     margin-right: auto;
}

このクラスが定義されている場合は、それをスパンに追加するだけで準備完了です。

<div class="span7 center"> box </div>

このカスタム センター クラスは、ブートストラップ css の後に定義する必要があることに注意してください。使用できます!importantが、お勧めしません。

于 2013-02-18T09:31:24.123 に答える
34

Bootstrap3 には、.center-block使用できるクラスがあります。次のように定義されます。

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

ドキュメンテーションはこちら。

于 2014-11-27T06:56:21.377 に答える
21

完全なブートストラップを行いたい場合 (自動左右方向ではなく)、12 列 (2 つの空白、8 つのコンテンツ、2 つの空白など) に収まるパターンが必要です。それが、このセットアップが行うことです。-md-バリアントのみをカバーしています。col -xs-12 を追加することで、小さいサイズのフルサイズにスナップする傾向があります。

<div class="container">
  <div class="col-md-8 col-md-offset-2">
     box
  </div>
</div>
于 2014-05-26T23:39:32.590 に答える
8

単一のコンテナを中央揃えにしたかったようです。ブートストラップフレームワークは、その1つの例を複雑にしすぎている可能性があります。たとえば、次のような独自のスタイルを持つスタンドアロンのdivがあった可能性があります。

<div class="login-container">
  <!-- Your Login Form -->
</div>

とスタイル：

.login-container {
  margin: 0 auto;
  width: 400px; /* Whatever exact width you are looking for (not bound by preset bootstrap widths) */
}

.containerブートストラップdiv内のどこかにネストされている場合は、これで問題なく機能するはずです。

于 2012-10-07T06:07:40.757 に答える
3

クラスcentercontentsを追加します

/** Center the contents of the element **/
.centercontents {
    text-align: center !important;
}
于 2013-02-04T19:37:11.997 に答える