Question

目前，我有一个加载PHP数组并在Bootstrap中创建行的页面。 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），但如果有一个SECOND行，它将启动回到5n + 1 INSTEAD到5n + 5。

我意识到这是由行引起的 - 在添加之前，这很好用。但是，在我当前的框架中，我使用最好的方法有点迷失，所以项目类完全迭代。

这里是一个jsfiddle example，有两行显示它不会遍历所有5种颜色选项（第5种是偏红色）。

感谢您的帮助！

Answer 1

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

另一种选择是使用jquery来做同样的事情。迭代每一行，索引1 addClass（＆＃39; bgcolor-blue＆＃39;），如果2 addClass（＆＃39; bgcolor-ltblue＆＃39;）.....等等。

这是最佳方法的明显例子。

<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/

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

：Bootstrap行中的第n个子项

1 个答案: