在多个列上拆分动态列表

本文关键字：拆分 动态 列表 | 更新日期: 2023-09-27 18:01:33

我的razor视图中有以下代码来动态生成兴趣列表和它们旁边的复选框。

<div class="form-group">
  <div class="col-md-10 col-md-offset-1">
     <h3>Tick the areas your club is interested/runs events in</h3>
  </div>
</div>
<div class="col-md-offset-1">
    @for (int i = 0; i < Model.ClubTypeInterests.Count(); i++)
    {
        <div>
            @Html.HiddenFor(x => Model.ClubTypeInterests[i].InterestId)
            @Html.CheckBoxFor(x => Model.ClubTypeInterests[i].selected)
            @Html.LabelFor(x =>  Model.ClubTypeInterests[i].ListInterestName, Model.ClubTypeInterests[i].ListInterestName)
        </div>
    }
</div>

我想把它分散到2或3列，这取决于列表中有多少项，而不仅仅是一个长列。我怎样才能做到这一点呢?

在多个列上拆分动态列表

为什么不为每个迭代创建一个新列呢?

<div class="col-md-offset-1">
    <div class="form-group">
        @for (int i = 0; i < Model.ClubTypeInterests.Count(); i++)
        {
            <div class="col-md-2">
                @Html.HiddenFor(x => Model.ClubTypeInterests[i].InterestId)
                @Html.CheckBoxFor(x => Model.ClubTypeInterests[i].selected)
                @Html.LabelFor(x =>  Model.ClubTypeInterests[i].ListInterestName,Model.ClubTypeInterests[i].ListInterestName)
            </div>
    }
    </div>
</div>

因此，将初始div偏移1，然后每次循环迭代创建一个包含所需元素的新div。以col-md-2为例，请根据需要修改

相关文章：