在 foreach 中使用 twitter bootstrap span答案

【问题标题】：Use twitter bootstrap span in foreach在 foreach 中使用 twitter bootstrap span
【发布时间】：2013-07-17 23:43:59
【问题描述】：

如何在 foreach 循环中使用 twitter 跨度？

这是我的代码：

<div class="row-fluid">
    <?foreach ($photos as $photo) { ?>
        <div class="span4">
            stuff
        </div>
    <? }?>
</div>

但问题是第 4 个输出（现在位于第 2 行）偏离中心 - 由于左侧的边距/填充。

我试图避免在每个第三个循环之后添加一个计数器并手动插入一个新的“行”——通过 bootstrap/css 肯定有更清洁的方法吗？

【问题讨论】：

【解决方案1】：

通过使用 CSS3 的 nth-child 选择器，您可以使用数学来定位元素。

.span4:nth-child(3n+1) {
    /* CSS here */
}

3n+1 是一个数学函数，其中 n 递增 1，因此它将针对元素 #1 (3x0 + 1)、#4 (3x1 + 1)、#7 (3x2 + 1) 等。

【讨论】：