创建复选框的 3 列布局

Question

我正在尝试将复选框列表排列成 3 列，例如：

A    F    L
B    G    M
C    H    N
D    I    O
E    K    ...

目前我有执行此操作的代码，但是如果复选框的数量不能被 3 整除，则它超出范围并引发空引用异常。我拥有的复选框数量可能会有所不同，因此我无法将其硬编码为可被 3 整除的数字。

这是我目前拥有的代码：

@{
    var rows = (Model.BettingOffices.Count()) % 10 == 0
        ? (Model.BettingOffices.Count) / 10
        : ((Model.BettingOffices.Count) / 10) + 1;
}

<table>
    @for (int i = 0; i < rows; i++)
    {
        <tr>
            <td width="400">
                @Model.BettingOffices.Skip(i).FirstOrDefault().OfficeName
                <input name="selectedShops" type="checkbox" 
                    value="@Model.BettingOffices[i].OfficeName"/>
            </td>
            <td width="400">
                @Model.BettingOffices.Skip(i + rows).FirstOrDefault().OfficeName
                <input name="selectedShops" type="checkbox" 
                    value="@Model.BettingOffices[i + rows].OfficeName" />
            </td>
            <td width="400">
                @Model.BettingOffices.Skip(i + rows * 2).FirstOrDefault().OfficeName
                <input name="selectedShops" type="checkbox" 
                    value="@Model.BettingOffices[i + rows * 2].OfficeName" />
        </tr>
    }
</table>

有什么办法可以阻止它超出范围并抛出异常？

Answer 1

只需使用 CSS 并停止使用 HTML 进行布局样式。

HTML

<ul class="checkboxes">
    <li><label><input type="checkbox"/> CheckBox 1</label></li>
    <li><label><input type="checkbox"/> CheckBox 2</label></li>
    <li><label><input type="checkbox"/> CheckBox 3</label></li>
    ...
</ul>

CSS

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

您可能需要稍微调整显示，但这将使您大部分时间都在那里。列表项将尽可能多地填充该行，然后自动换行到下一行，因此基于 33.3333% 的宽度，每行将得到 3 个。

或者，甚至可以通过使用一些带有网格的 CSS 库来实现完全响应（您可以推出自己的，但为什么呢？）例如，使用 Bootstrap，您可以执行以下操作：

<ul class="list-unstyled row">
    <li class="col-md-4 col-xs-6"><label><input type="checkbox"/> CheckBox 1</label></li>
    <li class="col-md-4 col-xs-6"><label><input type="checkbox"/> CheckBox 2</label></li>
    <li class="col-md-4 col-xs-6"><label><input type="checkbox"/> CheckBox 3</label></li>
    ...
</ul>

不需要额外的 CSS，并且您可以获得能够响应地更改一行上出现的数量的好处。例如，在上面的代码中，中型和以上的显示器每行得到 3 个（Bootstrap 使用 12 列网格，所以其中的三分之一是 4），而非常小的显示器（如纵向手机）只能得到 2 (12/2 = 6)。这是多比使用HTML更灵活，尤其是与表内，以将绝对博克显示一个小的装置上。