网格设计的高效代码

【问题标题】：Efficient code for grid design网格设计的高效代码
【发布时间】：2013-07-18 13:41:13
【问题描述】：

最近有人向我介绍了 bootstrap 和 RWD。我已经理解了整个想法，但我似乎无法掌握网格系统。我创建了一个 div 容器来进行固定设计。我想使用网格，但网页中有很多空间。意思是这样的：

标题

大约 10 行可用空间

内容/内容/内容

大约 5 行可用空间

内容

如何使用网格设计我的网页？我想我要问的不是如何，而是什么是有效的方法。我不希望我的代码混乱。谢谢。

【问题讨论】：

标签： html twitter-bootstrap grid

【解决方案1】：

<div class='container'>
    <div class='row'>
        <div class='span12'>HEADER</div>
    </div>

    <div class='row'>
        <div class='span4'>CONTENT</div>
        <div class='span4'>CONTENT</div> 
        <div class='span4'>CONTENT</div>
    </div>

    <div class='row'>
        <div class='span12'>CONTENT</div>
    </div>    
</div>

对于空闲空间的线条，根据需要添加边距

【讨论】：

我在想也许可以使用空行，直到达到我想要的行。那怎么样？
我绝对不会那样做，主要是因为它是丑陋的代码，而且我不认为它会起作用，因为这些行的高度为零。你为什么反对使用边距？