右列中有两列左侧列和主要内容

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

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

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

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

Answer 2

你正在使用2 col-md-4意思是已经使用col-md-8 = 16列已经8列+，请记住bootstrap每行可以包含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>