html - 复杂的自举生成网格

Question

使用 Bootstrap 对复杂的生成网格感到头疼。

纵向和横向 block 分为 5 列，但它们都具有相同的表面，除了 block 号 1 只有相同的宽度。

当两个肖像 block 共享同一行时，它变得复杂。移动带有边距的内容是不合适的。

Answer 1

给你:这是 fiddle Demo

<div class="row-fluid">
    <div class="span4">
        <div class="well">1<br/><br/><br/><br/><br/></div>
        <div class="well">5</div>
    </div>
    <div class="span8">
            <div class="span12"><div class="well">2</div></div>
        <div class="row-fluid">
            <div class="span8">
                <div class="well">3</div>
                <div class="well">6</div>
            </div>
            <div class="span4"><div class="well">4<br/><br/><br/><br/><br/></div></div>
        </div>
    </div>
</div>
<div class="row-fluid">
    <div class="span2">
        <div class="well">7<br/><br/><br/><br/><br/></div>
        <div class="well">14<br/><br/><br/><br/><br/></div>
    </div>
    <div class="span10">
        <div class="row-fluid">
            <div class="span6">
                <div class="well">8</div>
            </div>
            <div class="span6">
                <div class="well">9</div>
            </div>
        </div>
        <div class="row-fluid">
            <div class="span3">
                <div class="well">
                    10<br/><br/><br/><br/><br/>
                </div>
            </div>
            <div class="span6">
                <div class="well">11</div>
                <div class="well">12</div>
            </div>
            <div class="span3">
                <div class="well">
                    13<br/><br/><br/><br/><br/>
                </div>
            </div>
        </div>
         <div class="row-fluid">
             <div class="span6">
                <div class="well">15</div>
            </div>
             <div class="span6">
             <div class="well">16</div>
            </div>
        </div>

    </div>
</div>

您不能完全自由地使用跨度来控制面板尺寸，如果您想要更精确的结果，您应该在 div 宽度上使用自定义百分比。