复杂的bootstrap跨越网格

Question

使用bootstrap解决了复杂的生成网格问题。

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

当两个肖像集团共享同一行时，它变得复杂。使用保证金移动内容是不合适的。

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>

使用span，您对面板尺寸没有完全免费，如果您想要更精确的结果，则应在div宽度上使用自定义百分比。