7

ブートストラップで少し遊んだ後、スパンクラスをセンタリングする方法に関するこの厄介な問題を見つけました。いくつかのスパンをセンタリングするためにオフセットを試みた後、(オフセット 2 を使用したスパン 8、またはオフセット 3 を使用したスパン 6) のような特定のスパン クラスをセンタリングできますが、問題は、スパン 7/スパン 9/スパン 10 をセンタリングしたいことです。

次に、いくつかのトリックを使用して、span10 を中央に配置しようとしています...

<div class="container"> <!--Or span12 since the width are same-->
  <div class="row">
    <div class="span1" style="background:black;">Dummy</div>
    <div class="span10" style="background:blue;">The Real One</div>
    <div class="span1" style="background:black;">Dummy</div>
  </div>
</div>

上記のコードを使用するのではなく、解決策はありますか?

また、行のマージン左の値を変更せずに、span7、span9、さらには span11 を中央揃えにしたい場合はどうすればよいですか? クラスの行は既に margin-left を 20px に設定しているため、スパンを中央に配置するのが難しくなります。

4

2 に答える 2

4

「偶数」をセンタリングし.spanNますか？使用する.offsetN

<div class="span10 offset1">

「奇数」をセンタリング.spanN？フレームワーク リソースを使用することはできません。Twitter Bootstrap を使用することにしたので、グリッドを使用することを前提としました。「奇数」の列幅要素を中央に配置すると、グリッドが壊れることになるため、それを行うための Bootstrap ツールはありません。

理論的な (しかし奇妙な) 解決策があります: 列数を複製します。24 列のレイアウトでは、 が に.span7なり、span14を中央に配置できます.offset5。

于 2012-09-12T11:31:35.130 に答える
3

これは Bootstrap 3 では問題になりませんが、Bootstrap 2.x では、(ほぼ) 奇数のスパンを中央に配置するために使用できる「半分」のオフセットを作成する CSS の回避策を考え出しました。これらのハーフ スパンは、bootstrap.css の標準的な offsetX の半分のパーセンテージを作成します。

/* odd span centering helpers */

  .row-fluid .offsetHalf {margin-left:8.5% !important;}
  .row-fluid .offsetHalf1 {margin-left:12.9% !important;}
  .row-fluid .offsetHalf2 {margin-left:21.6% !important;}
  .row-fluid .offsetHalf3 {margin-left:25.6% !important;}

デモへのリンク

于 2013-05-13T12:18:39.443 に答える