Question

我的剃刀视图中有以下代码，可以动态生成一个兴趣列表和旁边的复选框。

<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列中，具体取决于列表中的项目数量，而不仅仅是一个长列。我怎样才能做到这一点？

Answer 1

为什么不为每次迭代创建一个新列？

<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为例，将其更改为您需要的内容。

在多列上拆分动态列表

1 个答案: