如何在960.gs/Bootstrap嵌套网格中集成Wordpress循环？

Question

即将实施我的第一个Wordpress网站.我的理解是,如果我的循环调用泛型项,它会有所帮助,例如:

<div id="article-excerpt">
<div>Article Heading</div>
<div>Article Sub-heading</div>
</div>

使用Twitter Bootstrap或960.gs时,我的Feed会跨多个列和多行.

例如,文章在由5列组成的嵌套网格上水平布局.每5个项目,就有一个新行.

Row 1: [article div] [article div] [article div] [article div] [article div]
Row 1: [article div] [article div] [article div] [article div] [article div]
Row 1: [article div] [article div] [article div] [article div] [article div]
etc.

我将解释下一点,以检查我对这些系统如何工作有基本的了解.

在960.gs中,对于嵌套网格,我需要在每行中声明第一项和最后一项alpha,omega分别为:

<div id="article excerpt" class="alpha grid_1">
    <div>Article Heading</div>
    <div>Article Sub-heading</div>
</div>

同样,在Twitter Bootstrap中我需要将每一行放在它自己的特殊DIV中:

<div class="row">

    <div id="article-excerpt" class="span1">
    <div>Article Heading</div>
    <div>Article Sub-heading</div>
    </div>

    <div id="article-excerpt" class="span1">
    <div>Article Heading</div>
    <div>Article Sub-heading</div>
    </div>

    <div id="article-excerpt" class="span1">
    <div>Article Heading</div>
    <div>Article Sub-heading</div>
    </div>

    <div id="article-excerpt" class="span1">
    <div>Article Heading</div>
    <div>Article Sub-heading</div>
    </div>

    <div id="article-excerpt" class="span1">
    <div>Article Heading</div>
    <div>Article Sub-heading</div>
    </div>

</div>

如果我的网格没有嵌套,事情会更简单一些.我意识到我可以简单地放置一个span1或grid_1放在我的容器内.当每行达到最大列数时,每行将自动换行到下一行.

考虑到这一点,我的Wordpress循环将非常简单.它不需要识别每行的第一个和最后一个项目,或计数,或增加数字,或类似的东西.

我想知道的是,如果有一种方法可以简化我的方法,那么循环不一定要计算项目,有点像这样:

<div class="grid_5">
  <LOOP> <div class="grid_1">generic article</div> </LOOP>
</div>

Answer 1

事实证明，在 Bootstrap 中，div当超过给定行中的列数时，span 会自动换行到下一行。

例如，我的网格是固定宽度、12 列的网格。

我的常规非 WordPress/循环 HTML 如下所示：

<div class="container">

<div class="row">

    <div class="span3">
    Content
    </div>

    <div class="span3">
    Content
    </div>

    <div class="span3">
    Content
    </div>

    <div class="span3">
    Content
    </div>

</div>

当然，当我集成循环时，div包含内容的 span3 的数量会随着我向网站添加更多内容而变化。然而，当新的跨度 3 添加到混合中时，Bootstrap 会愉快地换行到下一行。

这意味着我的循环不需要计算一行中的跨度数来计算行的开始/结束时间。

它可能看起来像这样：

<div class="container">

    <div class="row">

        <!-- WORDPRESS LOOP BEGINS HERE -->

        <div class="span3">
        Content
        </div>

        <!-- WORDPRESS LOOP ENDS HERE -->

    </div>

</div>