右栏中有两个左栏和主要内容 [英] Two left columns and main content in right column

问题描述

问题：试图使用Bootstrap 3创建布局，该布局由页面左侧的两列和一列主列组成在两列的右侧。

代码：

在左边的两列应该是彼此的顶部。

 < div class =container> 
< div class =row> 
< div class =col-md-4> 
< div class =widget> 
< div class =widget-header> 
< h3>左列1< / h3> 
< / div> 
 
< div class =widget-contentid =gallery>< / div> 
< / div> 
< / div> 
 
< div class =col-md-4> 
< div class =widget> 
< div class =widget-header> 
< h3>左列2< / h3> 
< / div> 
 
< div class =widget-contentid =gallery>< / div> 
< / div> 
< / div> 
 
< div class =col-md-8> 
< div class =widget> 
< div class =widget-header> 
< h3>主列< / h3> 
< / div> 
 
< div class =widget-content> 
< div id =map_canvasstyle =height：280px;>< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
  

输出：

期望的输出：

解决方案

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

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

请确保放大结果窗口以查看正确的布局。否则，它会为了响应目的而堆叠div容器。

Problem:

Trying to create a layout using Bootstrap 3 that consist of two columns on the left of the page and one main column to the right of the two columns. The two columns on the left should be on top of each other.

Code:

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

Output:

Current code produce two columns next to each other on top the main column.

Desired output:

解决方案

You should use a div with class .col-sm-4 and .col-sm-8 respectively as the parent div for the two column layout you want to use and then create the desired widgets within those divs.

Check out my JSFiddle: http://jsfiddle.net/nJtX9/9/

Please make sure to enlarge the results window to see the correct layout. Otherwise it will stack the div containers for responsive purposes.

这篇关于右栏中有两个左栏和主要内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！