html - 在 Bootstrap 网格中定位 div

Question

我正在尝试使用 Bootstrap 归档类似这样的内容:

我得到的是这个:

这是我的 HTML:

<div id="layout" class="container">
    <div class="row col-md-12">
        <div class="col-md-6" style="min-height: 100px;border: 1px white solid;background-color: #4986e7;"></div>
        <div class="col-md-6" style="min-height: 50px;border: 1px white solid;background-color: #16a765;"></div>
    </div>
    <div class="row col-md-12">
        <div class="col-md-offset-6 col-md-6" style="min-height: 50px;border: 1px white solid;background-color: #16a765;"></div>
    </div>
    <div class="row col-md-12">
        <div class="col-md-2" style="min-height: 50px;border: 1px white solid;background-color: #f83a22;"></div>
        <div class="col-md-2" style="min-height: 50px;border: 1px white solid;background-color: #fa573c;"></div>
        <div class="col-md-2" style="min-height: 50px;border: 1px white solid;background-color: #f83a22;"></div>
        <div class="col-md-2" style="min-height: 50px;border: 1px white solid;background-color: #fa573c;"></div>
        <div class="col-md-2" style="min-height: 50px;border: 1px white solid;background-color: #ffad46;"></div>
        <div class="col-md-2" style="min-height: 50px;border: 1px white solid;background-color: purple;"></div>
    </div>
</div>

我的 CSS:

.row {
    background-color: transparent;
    border: 0;
}

我已经尝试过更改 div 的边距和填充、内联样式以及单独的样式表、col-lg-、col-sm-，但我得到了相同的结果。有人能给我指出正确的方向吗？我应该从哪里着手解决这个问题？

JSFiddle

谢谢。

Answer 1

嘿伙计，我想你只想将第二个绿色列嵌套在第一行 col-md-12 中，而不是单独使用它。就像这样:

<div class="row col-md-12">
    <div class="col-md-6" style="min-height: 100px;border: 1px white solid;background-color: #4986e7;"></div>
    <div class="col-md-6" style="min-height: 50px;border: 1px white solid;background-color: #16a765;"></div>
    <div class="col-md-6" style="min-height: 50px;border: 1px white solid;background-color: #16a765;"></div>
</div>

看看我对你自己的 fiddle 的修改

http://jsfiddle.net/qfoLe5vu/8/