web-dev-qa-db-ja.com

Bootstrap互いに重なり合うグリッド列

Bootstrapのグリッドレイアウトとその中の列の重なりに問題があります。問題が本当に何であるかはわかりませんが、どんなアドバイスでも大歓迎です、ありがとう。

<div class="container">    

    <div class="row">
        <div class="col-md-6">
            <img src="content/one.png">
        </div>

        <div class="col-md-6">
            <div class="row">
                <div class="col-md-6"><img src="content/two.png"></div>
                <div class="col-md-6"><img src="content/three.png"></div>
            </div>
            <div class="row">
                <div class="col-md-6"><img src="content/four.png"></div>
                <div class="col-md-6"><img src="content/five.png"></div>
            </div>
        </div>

        <div class="col-md-9">
            <div class="row">
                <div class="col-md-3"><img src="content/six.png"></div>
                <div class="col-md-9"><img src="content/seven.png"></div>
            </div>
            <div class="row">
                <div class="col-md-6"><img src="content/eight.png"></div>
                <div class="col-md-6"><img src="content/nine.png"></div>
            </div>
        </div>
        <div class="col-md-3">
            <img src="content/ten.png">
        </div>
    </div>

</div>

グリッドのスクリーンショット- http://i.stack.imgur.com/a3YBr.jpg

twitter-bootstraptwitter-bootstrap-3grid
14
kingprawn123

グリッド構文が正しくありません。最初の行のdivには、子としてcol-md-6、col-md-6、col-md-9、およびcol-md-3があります。 Bootstrapグリッドシステムには24ではなく12の列があります。

次のようなものを試してみてください（col-md-9とcol-md-3を新しい行divにラップ）：

<div class="container">

    <div class="row">
        <div class="col-md-6">
            <img src="content/one.png">
        </div>

        <div class="col-md-6">
            <div class="row">
                <div class="col-md-6"><img src="content/two.png"></div>
                <div class="col-md-6"><img src="content/three.png"></div>
            </div>
            <div class="row">
                <div class="col-md-6"><img src="content/four.png"></div>
                <div class="col-md-6"><img src="content/five.png"></div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-9">
            <div class="row">
                <div class="col-md-3"><img src="content/six.png"></div>
                <div class="col-md-9"><img src="content/seven.png"></div>
            </div>
            <div class="row">
                <div class="col-md-6"><img src="content/eight.png"></div>
                <div class="col-md-6"><img src="content/nine.png"></div>
            </div>
        </div>
        <div class="col-md-3">
            <img src="content/ten.png">
        </div>
    </div>

</div>
7
Getz

明確なブートプライでグリッド構文を使用し、イメージを削除しましたが、正常に機能しているようです。 jsfiddleまたはbootplyを作成していないため、それなしではさらに支援することはできません。テキストのみのグリッドは次のようになります。

ブートプライの例

列内のすべての画像にimgレスポンシブクラスを追加して、それらが含まれている列がオーバーフローしないようにしてください。

3
Maciej Gurban

16x16グリッドを実現しようとしている場合、ネストされた列の幅は正しくありません。

このセクションを確認することから始めます。

    <div class="col-md-9">
        <div class="row">
            <div class="col-md-3"><img src="content/six.png"></div>
            <div class="col-md-9"><img src="content/seven.png"></div>
        </div>

3/4列（9/12）に1/4列（3/12）をネストしています。列の最終的な幅を把握するには、それらを掛け合わせて3/16を取得します。本当に1/4（4/16）列が必要です。これを修正するには、この（3/4）セクションを四半期ではなく3番目に分割する必要があります（4/12 = 1/3および8/12 = 2/3）：

    <div class="col-md-9">
        <div class="row">
            <div class="col-md-4"><img src="content/six.png"></div>
            <div class="col-md-8"><img src="content/seven.png"></div>
        </div>

問題をより明確にするために、seven.pngを含むセルに背景色を追加します。セルが実際に存在するように、色が空のスペースを埋めることがわかります。写真は、あまりにも狭すぎて目立たない。

このセクションの下半分にも同じ修正が必要です。

        <div class="row">
            <div class="col-md-6"><img src="content/eight.png"></div>
            <div class="col-md-6"><img src="content/nine.png"></div>
        </div>
    </div>

ここで、3/4列を取得し、1/2に分割します（再度乗算）。1/ 2（8/16ths）が必要な左側に3/8（6/16）列を作成します。右側に1/4（4/16）ともう1つが必要な3/8（6/16）列。繰り返しますが、修正はバランスを3分の1に分割することです。

        <div class="row">
            <div class="col-md-8"><img src="content/eight.png"></div>
            <div class="col-md-4"><img src="content/nine.png"></div>
        </div>
    </div>

また、背景色をnine.pngの後ろに配置すると、空白を埋めていることがわかります。

0
claytond