0

コンテナーと Twitter ブートストラップ サイトのグリッドの間にパディング (ガター) を取得しようとしています。

<div class="container">
  <div class="row">
    <div class="span4">
      Some narrow content
    </div>
    <div class="span8">
      Some wider content
    </div>
  </div>
</div>

.container に 10px のパディングを入れると、ピクセル幅を使用する固定グリッドのスペースを狭くしているため、すべてが壊れる..それがわかったので、流動的なレイアウトを試しました。

これにより、必要なガターでグリッドが正しくフォーマットされますが、別の場所で問題が発生します。私の狭いコンテンツでは、実際にこれを持っています（簡潔にするためにaとimgは削除されていますが、それらはすべて同じサイズです）：

 <ul class="thumbnails">
   <li class="span2">...</li>
   <li class="span2">...</li>
   <li class="span2">...</li>
   <li class="span2">...</li>
   <li class="span2">...</li>
   <li class="span2">...</li>
 </ul>

固定レイアウトでは、これは素敵な正方形の 2x3 グリッドの画像に完全にラップされます。流動的なレイアウトでは、一番上の行に 2 つの画像が表示され、残りの部分がわずかにインデントされた 1 つの画像が表示されます。きれいなサムネイル グリッドが壊れています。一部の調査では、流動的なレイアウトにはサムネイルに動的な余​​白があり、最初の余白は次の特別な CSS コードに合わせて作成されていることが明らかになりました。

 .row-fluid [class*="span"]:first-child {
   margin-left: 0;
 }

これは明らかに 2 行目の最初の画像には当てはまらないため、他のサムネイルと同じ余白 (間隔のため) を取得し、一番上の行に並べます。

だから私はどちらかの問題の解決策を探しています。固定レイアウトを使用することを望んでいましたが、誰かがサムネイルの問題を解決できる場合は、流動的なレイアウトを喜んで使用します。

これに遭遇した人は誰でも解決策を持っていますか?

乾杯！

4

1 に答える 1

0

containerまたはクラスをパディングすることはお勧めしませんrow。ブートストラップ グリッド全体が破棄されます。パディングをspan*クラスdivsに直接適用します。

于 2012-11-27T15:41:25.077 に答える