1

問題：

Bootstrap 3 を使用して、ページの左側に 2 つの列があり、2 つの列の右側に 1 つのメイン列があるレイアウトを作成しようとしています。左側の 2 つの列は互いに重なっている必要があります。

コード：

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="widget">
                <div class="widget-header">
                    <h3>Left column 1</h3>
                </div>

                <div class="widget-content" id="gallery"></div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="widget">
                <div class="widget-header">
                    <h3>Left column 2</h3>
                </div>

                <div class="widget-content" id="gallery"></div>
            </div>
        </div>

        <div class="col-md-8">
            <div class="widget">
                <div class="widget-header">
                    <h3>Main column</h3>
                </div>

                <div class="widget-content">
                    <div id="map_canvas" style="height: 280px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

出力：

現在のコードは、メイン列の上に隣り合った 2 つの列を生成します。

望ましい出力:

ここに画像の説明を入力

4

3 に答える 3

1

使用する2 列のレイアウトの親 div としてクラス.col-sm-4およびそれぞれの div を使用し、それらの div 内に目的のウィジェットを作成する必要があります。.col-sm-8

私のJSFiddleをチェックしてください：http://jsfiddle.net/nJtX9/9/

結果ウィンドウを拡大して正しいレイアウトを確認してください。それ以外の場合は、レスポンシブの目的で div コンテナーがスタックされます。

于 2013-10-21T06:27:35.663 に答える
0

2 col-md-4 を使用している意味は、既に 8 列を使用している + col-md-8 を使用 = 16 列です。ブートストラップには行ごとに 12 列を含めることができることに注意してください。

これを回避する方法は、col-md-4 の代わりに col-md-2 を使用することです

これを明確にすることを願っています。

于 2013-10-20T14:21:26.300 に答える