创建3列的复选框布局

我正在尝试将复选框列表安排为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>

是否有任何方法可以阻止它超出范围并抛出异常?

<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>

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

<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>