如何为Bootstrap网格系统实现行颜色交替显示

方法一：通过循环变量取模设置样式 #

完全可以通过判断i % 2 == 0来给不同行添加CSS类，进而实现交替背景色。修改后的代码示例如下：

@for (var i = 0; i < Model.Transactions.Count; i++)
{
    <div class="row @(i % 2 == 0 ? "even-row" : "odd-row")">
        <div class="col">
            <label asp-for="@Model.Transactions[i].TransactionId" />@Model.Transactions[i].TransactionId
        </div>
    </div>
}

接着在样式表中定义对应类的背景色：

.even-row {
    background-color: #f8f9fa;
}
.odd-row {
    background-color: #ffffff;
}

方法二：纯CSS实现（更优方案） #

不需要依赖后端循环变量，直接用CSS的:nth-child()伪类就能实现交替样式，这种方式遵循样式与逻辑分离的原则，代码更简洁易维护：

先简化视图代码，用foreach循环替代for循环（代码更简洁）：

@foreach (var transaction in Model.Transactions)
{
    <div class="row">
        <div class="col">
            <label asp-for="@transaction.TransactionId" />@transaction.TransactionId
        </div>
    </div>
}

然后在CSS中添加交替样式：

.row:nth-child(even) {
    background-color: #f8f9fa;
}
.row:nth-child(odd) {
    background-color: #ffffff;
}

内容的提问来源于stack exchange，提问作者Mark C