css3 - :nth-​​child在Bootstrap行中

目前，我有一个页面可以在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种不同的选择进行迭代。它基于项目类。

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种是带红色的颜色）。

感谢您提供的所有帮助！

最佳答案

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

另一种选择是使用jquery进行相同类型的操作。遍历每一行，从索引1 addClass（'bgcolor-blue'），如果索引为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/

我希望这有帮助...

关于css3 - :nth-​​child在Bootstrap行中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24558950/