引导跨度上方的空白空间

Question

我想删除第4个跨度上方的空白区域，并将其替换为下一个跨度 编辑：不添加新行

这里是小提琴 http://jsfiddle.net/Dzh5E/7/

<div class="main-app">
    <div class="row-fluid">
        <div class="span3 md-hieght"></div>
        <div class="span3 md-hieght"></div>
        <div class="span6 lg-hieght"></div>
        <div class="span3 md-hieght"></div>
        <div class="span3 md-hieght"></div>
        <div class="span3 md-hieght"></div>
        <div class="span3 md-hieght"></div>
     </div>
</div>

.md-hieght {
    height: 300px;
    background: red;
}
.lg-hieght {
    height: 600px;
    background: blue;
}
.main-app {
    margin-left: 13%;
    margin-right: 13%;
}

Answer 1

您应该每12列添加一个新的.row-fluid。

<div class="main-app">
    <div class="row-fluid">
        <div class="span3 md-hieght"></div>
        <div class="span3 md-hieght"></div>
        <div class="span6 lg-hieght"></div>
    </div>
    <div class="row-fluid">
        <div class="span3 md-hieght"></div>
        <div class="span3 md-hieght"></div>
        <div class="span3 md-hieght"></div>
        <div class="span3 md-hieght"></div>
     </div>
</div>

http://jsfiddle.net/Dzh5E/9/embedded/result/

Answer 2

重要的是将html结构化为两列。一个用于您想要移除空间的短项目，另一个用于高项目。

您必须按照您想要的方式调整保证金（或在问题的评论中提及）。如果你使用这种技术，请确保使用更有意义的类，但我认为fiddle就是你要找的。

<强> HTML

<div class="main-app row-fluid">
    <div class="span9 short">
        <div class="span3 md-hieght"></div>
        <div class="span3 md-hieght"></div>
        <div class="span3 md-hieght"></div>
        <div class="span3 md-hieght"></div>
        <div class="span3 md-hieght"></div>
        <div class="span3 md-hieght"></div>
    </div>
    <div class="span3 tall">
         <div class="span6 lg-hieght"></div>
    </div>
</div>

<强> CSS

.short .span3 {
    /*Remove left margin and add a bottom and right*/
    margin: 0 20px 20px 0;
}