ASP.NET Razor视图中如何将12项列表拆分为两列各6项？

嘿，这事儿好办！要把12条数据拆成两列各6条展示，咱们可以结合Razor的集合操作和CSS布局来实现，给你两种常用方案：

方案1：用Flex布局（轻量灵活） #

先在Razor里把数据拆成两组，再用Flex容器让两列并排：

@{
    // 拆分数据：前6条放第一列，后6条放第二列
    var firstColumnTaxas = item.TaxaBandeiraAdministradoras.Take(6).ToList();
    var secondColumnTaxas = item.TaxaBandeiraAdministradoras.Skip(6).Take(6).ToList();
}

<div class="collapse" id="divRows-@item.BandeiraAdministradoraId">
    <!-- Flex容器：控制两列并排 -->
    <div style="display: flex; gap: 30px; padding-left: 100px;">
        <!-- 第一列 -->
        <div>
            @foreach (var taxa in firstColumnTaxas)
            {
                <div class="mb-2"> <!-- mb-2加个行间距，可选 -->
                    @Html.DisplayFor(modelItem => taxa.NumeroTaxas, new { @class = "text-uppercase" })
                    @Html.Raw("X = ")
                    @Html.DisplayFor(modelItem => taxa.ValorTaxa, new { @class = "..." })
                </div>
            }
        </div>
        <!-- 第二列 -->
        <div>
            @foreach (var taxa in secondColumnTaxas)
            {
                <div class="mb-2">
                    @Html.DisplayFor(modelItem => taxa.NumeroTaxas, new { @class = "text-uppercase" })
                    @Html.Raw("X = ")
                    @Html.DisplayFor(modelItem => taxa.ValorTaxa, new { @class = "..." })
                </div>
            }
        </div>
    </div>
</div>

方案2：用Bootstrap栅格（响应式友好） #

如果你项目里用了Bootstrap，直接用栅格系统更省心，移动端会自动堆叠成单列：

@{
    var firstColumnTaxas = item.TaxaBandeiraAdministradoras.Take(6).ToList();
    var secondColumnTaxas = item.TaxaBandeiraAdministradoras.Skip(6).Take(6).ToList();
}

<div class="collapse" id="divRows-@item.BandeiraAdministradoraId">
    <div class="row" style="padding-left: 100px;">
        <!-- 第一列：占一半宽度 -->
        <div class="col-md-6">
            @foreach (var taxa in firstColumnTaxas)
            {
                <div class="mb-2">
                    @Html.DisplayFor(modelItem => taxa.NumeroTaxas, new { @class = "text-uppercase" })
                    @Html.Raw("X = ")
                    @Html.DisplayFor(modelItem => taxa.ValorTaxa, new { @class = "..." })
                </div>
            }
        </div>
        <!-- 第二列：占一半宽度 -->
        <div class="col-md-6">
            @foreach (var taxa in secondColumnTaxas)
            {
                <div class="mb-2">
                    @Html.DisplayFor(modelItem => taxa.NumeroTaxas, new { @class = "text-uppercase" })
                    @Html.Raw("X = ")
                    @Html.DisplayFor(modelItem => taxa.ValorTaxa, new { @class = "..." })
                </div>
            }
        </div>
    </div>
</div>

小提示 #

• 如果数据条数不是刚好12，Take(6)会自动取现有条数，不会报错；Skip(6)后如果剩下不足6条，也只会显示剩余的。
• 可以调整gap（Flex方案）或者Bootstrap的间距类来优化排版，让内容更美观。

内容的提问来源于stack exchange，提问作者Geovanna Monteiro Scabio