Question

在我的MVC视图中，我有这个：

@foreach (var state in Model.States)
{
    <div class="checkbox">
        <label>
            <input type="checkbox" name="SelectedStates" id="sell_@state.Value" value="@state.Value" /> @state.Text
        </label>
    </div>
}

国家在哪里：

public List<SelectListItem> States { get; set; }

当然，这会将所有复选框放在一列中。我试图找出将它们分成5列，每列10列的最佳方法。我希望有更优雅的方式，而不是在foreach中放置一个计数器，并在计数器击中10时使用div。

修改

他们需要在垂直列中。不是水平行。（我认为从帖子的标题中可以清楚地看到，但也许不是。）

有什么想法吗？

Answer 1

<div>
@foreach (var state in Model.States)
{   <ul class="checkboxes">
            @foreach (var item in Model) {
                <li>
                    @Html.DisplayFor(modelItem => item.Name)
                    @Html.CheckBoxFor(modelItem => item.Active)
                </li>
            }
        </ul>
}
</div>

<强> CSS

.checkboxes ul, .checkboxes li {
    margin:0;
    padding:0;
    list-style:none;
}
.checkboxes li {
    display:inline-block;
    width:20%;
}

演示 https://jsbin.com/bumomeyeki/edit?html,css,output

Answer 2

根据Sethu Bala提供的链接，这就是我想出的。看起来很难看，但它确实有效：

 @{int i = 0;}
    <div class="col-md-1">
    @foreach (var state in Model.States)
    {
        i++;
        <div class="checkbox">
            <label>
                <input type="checkbox" name="SelectedStates" id="sell_@state.Value" value="@state.Value" /> @state.Text
            </label>
         </div>
         if (i == 10)
             {
                 @Html.Raw("</div><div class=\"col-md-1\">");
                 i = 0;
             }
    }
    </div>

5个垂直列中的50个状态的堆栈复选框

2 个答案: