twitter-bootstrap - Twitterのブートストラップアラートを連続して中央に配置するにはどうすればよいですか?

Question

コードは次のようになります。

<div class="row">
<div class="span4 alert alert-info">My Alert</div>
</div>

これはうまくいきません。アイデア？

幅をハードコーディングする必要のないソリューションを探しています。

score 4 · Accepted Answer

デフォルトの 12 列のグリッドを使用していると仮定します。

<div class="row">
    <div class="span4 offset4 alert alert-info">My Alert</div>
</div>

ドキュメントのグリッドシステムセクションの列のオフセットを参照してください。

score 3 · Accepted Answer

あなたのスタイルにこれを追加してください。

.alert {
   width:40%; margin-left: 30%;
}

アップデート

上記の手法は機能しますが (100-40-30 を実行して右に 30% を維持します...)。代わりに次の手法を使用する方が簡単です。この手法では、テキストの長さに応じてボックスのサイズを調整する必要がないからです。前の例とは異なります。可能な場合はこれを使用します。

.alert {
    margin: auto; display: table;
}

score 1 · Accepted Answer

コードを次のようにするのが最善です：

<div class="row">
 <div class="span12">
  <div class="alert alert-info">My Alert</div>
 </div>
</div>

次に、アラートを次のように設定できます。

.alert {
    display: inline-block;
    margin: 0 auto;
}

score 1 · Accepted Answer

1

<div class="alert alert-info col-lg-2 col-lg-offset-10">My Alert</div>

于 2014-07-25T08:19:21.690 に答える

4 に答える 4