:nth-child 在引导行中

Question

目前，我有一个在 Bootstrap 中加载 PHP 数组并创建行的页面。 PHP 正在为列计数生成一个随机数（col-sm-4、col-sm-3 等是随机创建的，直到它加起来为 12）。

Bootstrap 容器中的一行示例：

    <div class="row equal project-row">
        <article class="col-sm-4 project">
            <header class="project-title">title</header>
            <p class="project-desc">text</p>
        </article>
        <article class="col-sm-3 project">
            <header class="project-title">title</header>
            <p class="project-desc">text</p>
        </article>
        <article class="col-sm-4 project">
            <header class="project-title">title</header>
            <p class="project-desc">text</p>
        </article>
        <article class="col-sm-1 project">
            <header class="project-title">title</header>
            <p class="project-desc">text</p>
        </article>
    </div>

然后我有一些 CSS 设置每个 <article> 的背景颜色，迭代 5 个不同的选择。它基于 project 类。

CSS：

.project:nth-child(5n+1) {
    background: rgba(32,78,127,1);
}
.project:nth-child(5n+2) {
    background: rgba(6,133,135,1);
}
.project:nth-child(5n+3) {
    background: rgba(79,185,159,1);
}
.project:nth-child(5n+4) {
    background: rgba(109,242,87,1);
}
.project:nth-child(5n+5) {
    background: rgba(214,77,53,1);
}

但是，迭代的颜色只在每一行内改变；例如，在上面代码的示例行中，它将显示前四种颜色（5n+1、5n+2、5n+3 和 5n+4），但如果有第二行，它将开始回到 5n+1 而不是 5n+5。

我意识到这是由行引起的 - 在添加这些行之前，这工作正常。但是我有点迷失在我当前的框架内使用的最佳方法，以便完全迭代项目类。

这是一个jsfiddle example，有两行表明它没有遍历所有 5 个颜色选项（第 5 个是红色）。

感谢您的所有帮助！

Answer 1

如果您使用服务器语言输出行，则可以使用 MOD 函数，然后使用 if 语句根据 MOD 输出添加行颜色类。

另一种选择是使用 jquery 来做相同类型的事情。遍历每一行，在索引 1 addClass('bgcolor-blue')，if 2 addClass('bgcolor-ltblue').....等等。

这将是最佳方法的一个明确示例。

<style>
.project:nth-child(5n+1) {
    background: rgba(32,78,127,1);
}
.project:nth-child(5n+2) {
    background: rgba(6,133,135,1);
}
.project:nth-child(5n+3) {
    background: rgba(79,185,159,1);
}
.project:nth-child(5n+4) {
    background: rgba(109,242,87,1);
}
.project:nth-child(5n+5) {
    background: rgba(214,77,53,1);
}

</style>


<div class='row equal project-row'>
    <article class="col-sm-4 project">
        <header class="project-title">title</header>
        <p class="project-desc">text</p>
    </article>
    <article class="col-sm-3 project">
        <header class="project-title">title</header>
        <p class="project-desc">text</p>
    </article>
    <article class="col-sm-4 project">
        <header class="project-title">title</header>
        <p class="project-desc">text</p>
    </article>
    <article class="col-sm-1 project">
        <header class="project-title">title</header>
        <p class="project-desc">text</p>
    </article>
</div>

<div class='row equal project-row'>
    <article class="col-sm-4 project">
        <header class="project-title">title</header>
        <p class="project-desc">text</p>
    </article>
    <article class="col-sm-3 project">
        <header class="project-title">title</header>
        <p class="project-desc">text</p>
    </article>
    <article class="col-sm-4 project">
        <header class="project-title">title</header>
        <p class="project-desc">text</p>
    </article>
    <article class="col-sm-1 project">
        <header class="project-title">title</header>
        <p class="project-desc">text</p>
    </article>
</div>

<script>
$(document).ready(function(){

    $('article').unwrap();  
    $('article').wrapAll('<div class="row equal project-row">')      

});
</script>

http://jsfiddle.net/judsonmusic/5uqZM/5/

我希望这会有所帮助...