Question

我正在尝试使用Bootstrap存档这样的东西：

expected result

而我正在接受这个：

current result

这是我的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>

查看我对你自己小提琴的修改

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

Answer 2

<div class="row col-md-12"> - 将强制每个嵌套项目都在其中。

因此，当您添加另一行，您想要共享上一行（第二个绿色）时 - 您不希望将其放在新的row中 - 而是让它共享同一行，删除它的偏移量，它会很棒！

<div id="layout" class="container">
    <div class="row col-md-12">
        <div class="col-md-6" style="float: left; 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>
    <div class="row col-md-12">

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

enter image description here

http://jsfiddle.net/qfoLe5vu/21/

Answer 3

Here is my HTML
<div class="container" id="layout">
    <div class="row col-md-12">
        <div style="min-height: 100px; border: 1px solid white; background-color: rgb(73, 134, 231); width: 50%; float: left;" class="col-md-6"></div>
        <div style="min-height: 50px; border: 1px solid white; background-color: rgb(22, 167, 101); width: 50%; float: left;" class="col-md-6"></div>

        <div style="min-height: 50px; border: 1px solid white; background-color: rgb(22, 167, 101); width: 50%; float: left;" class="col-md-6"></div>
   </div>
    <div class="row col-md-12">
        <div style="min-height: 50px;border: 1px white solid;background-color: #f83a22;" class="col-md-2"></div>
        <div style="min-height: 50px;border: 1px white solid;background-color: #fa573c;" class="col-md-2"></div>
        <div style="min-height: 50px;border: 1px white solid;background-color: #f83a22;" class="col-md-2"></div>
        <div style="min-height: 50px;border: 1px white solid;background-color: #fa573c;" class="col-md-2"></div>
        <div style="min-height: 50px;border: 1px white solid;background-color: #ffad46;" class="col-md-2"></div>
        <div style="min-height: 50px;border: 1px white solid;background-color: purple;" class="col-md-2"></div>
    </div>
</div>

FIDDLE

将div定位在Bootstrap网格中

3 个答案: