1

私は Twitter Bootstrap を初めて使用し、レスポンシブ動作/スタイリングの一部を理解するのに苦労しています。私は周りを検索しましたが、質問の言い回しが不十分であるか、これは一般的な問題ではないか、または明らかなことを知らないだけです。

グリッド フレームワークを使用していて、ドキュメントの幅が 1200 ピクセルかそれを少し超えると、コンテンツが画面の左端からはみ出してしまいます。1199 から 1200 に移動すると、スピルオーバーが発生します。1200 未満のレイアウトには同じ問題はありません。

http://jsfiddle.net/xBD9k/ - ドキュメントの幅が 1200 になるまで出力ウィンドウを調整します

ページの構造は次のとおりです (すべて流動的ではありません)。

container
 row
  span12
   row
    span12

私が知る限り、ローとスパン 12 をネストすることに問題はありません (私には正当な理由があります、約束します)。正と負の左マージンが互いに打ち消し合い、プログレッシブ インデントを防ぐように見えるからです。

コンテナーの明示的な幅は 1170px で、両側に margin: auto があります。ただし、最初の行のレンダリングされた幅は、margin-left: -30px で 1200px であるため、常に端からはみ出します。ただし、行にはその幅を明示的に指定するスタイルがなく、その中の span12 には 1170 margin-left 30 の明示的な幅があります。

Chrome の開発者ツール内でスタイルを無効にすることで、元に戻すことができますが、これを満足させるために Bootstrap CSS を編集する必要はないことはわかっています。

1200px 以上のスタイルがこのように端からはみ出す理由を誰か教えてもらえますか? 幅を 1220px 程度に拡大すると、すべてがページにうまく収まります。

4

2 に答える 2

1

行とスパンを混同しているようです。ドキュメント幅が 1200 の行は、ネストしても同じ幅になります。追跡しなければならないのはスパンです。

row - 1200px width
  span12 - 1170px width
    row - 1200px width
      span12 - 1170px width

その理由は、span12 の幅が 1170px にハードコードされており、行の左マージンが -30px にリセットされるためです。

CSSコードのこの部分は説明に役立つかもしれません

@media (min-width:1200px) {
    .row {
        margin-left: -30px;
        *zoom: 1;
    }

    .container {
        width: 1170px;
    }

    .span12 {
        width: 1170px;
    }
}
于 2013-05-29T00:17:35.957 に答える