css - 左列两列，右列主要内容

Question

问题：

尝试使用 Bootstrap 3 创建一个布局，该布局由页面左侧的两列和两列右侧的一个主列组成。左边的两列应该在彼此的顶部。

代码：

<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>

输出：

当前代码在主列顶部生成两列彼此相邻。

期望的输出：

Answer 1

您应该使用带有类的 div.col-sm-4和.col-sm-8分别作为要使用的两列布局的父 div，然后在这些 div 中创建所需的小部件。

查看我的 JSFiddle：http: //jsfiddle.net/nJtX9/9/

请确保放大结果窗口以查看正确的布局。否则它将堆叠 div 容器以用于响应目的。

Answer 2

您正在使用 2 col-md-4 表示已经占用 8 列 + 使用 col-md-8 = 16 列，请记住引导程序每行可以包含 12 列，

所以解决这个问题的方法是使用 col-md-2 而不是 col-md-4

希望我说清楚。

Answer 3

<div class="container">
        <div class="row">
            <div class="col-sm-6" style="background-color:gray">
                <div class="row" style="background-color:aliceblue">
                    <h1>col1----row1</h1>
                </div>
                <div class="row">
                    <h1>col1----row2</h1>
                </div>
            </div>

            <div class="col-sm-6" style="background-color: aqua">
                <h1>col2-----row<br />col2---row<br />col2---row</h1>

            </div>

        </div>
    </div>