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，您可以获得能够更改响应地显示在线上的数量的奖励。例如，在上面的代码中，中型和高级显示器每行获得三个（Bootstrap使用12列网格，因此其中三分之一为4），而像手机这样的非常小的显示器只能获得2个（12/2 = 6）。这比使用HTML更灵活，特别是对于那些绝对会在小型设备上显示屏幕的表格。

创建复选框的3列布局

1 个答案: