javascript - 如何使用div布局页面

Question

我正在使用 div 来布局页面。该页面有两列。第一列是 map 。第二列包含三行图表。我使用了下面的代码。结果只给我一列(而不是两列)和四行。我做错了什么？

<!-- This is where the map will live -->    
<div id="map-container" style="width:1000px; height:500px"></div>

<!-- CHARTS!!! -->

<div class="row">

    <!-- row chart -->
    <div class="col-md-1">
        <div id="rowchart2" class="dc-chart"></div>
        <center><div class="title">Severity</div></center>
    </div>

    <!-- Histogram-->
    <div class="col-md-2 col-md-offset-1">
        <div id="rowchart" class="dc-chart"></div>
        <center><div class="title">Histogram(Delta Speed)</div></center>
    </div>

    <!-- row chart -->
    <div class="col-md-4 col-md-offset-0">
        <div id="rowchart3" class="dc-chart"></div>
        <center><div class="title">Direction</div></center>     
    </div>                  
</div>

Answer 1

<div class="row">

    <div class="col-md-12">
        <div class="col-md-6">
            Column 1:


            <div id="map-container" class="col-md-12" style="width:100%; height:500px"></div>


        </div>

        <div class="col-md-6">


            OTHER DATA HERE

        </div>
    </div>


</div>