将div定位在Bootstrap网格中

时间:2014-11-10 15:56:09

标签: html css twitter-bootstrap

我正在尝试使用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

谢谢。

3 个答案:

答案 0 :(得分:5)

嘿,我认为你只想在第一行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/

答案 1 :(得分:3)

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

答案 2 :(得分:0)

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