gcogco10 Ответов: 1

Как создать списки чекбоксов для использования ASP.NET MVC в bootstrap?

Привет Команда

Кажется, я не могу правильно составить свой список флажков, потому что они как-то завинчены, и я использую boostrap на своем Razor@html.CheckboxFor().. Я хочу создать список, который будет выровнен по новой строке каждый раз.

Что я уже пробовал:

<pre>                        <div class="form-group row">
                            <label for="Dietary requirement" class="col-sm-2 col-form-label">Dietary requirements</label>
                            <div class="col-sm-2">
                                @Html.CheckBoxFor(model => model.DietMain.None)<label for="None">None</label>

                            </div>


                        </div>
                        <div class="col-sm-2">
                            @Html.CheckBoxFor(model => model.DietMain.Halaal)<label for="Halal">Halaal</label>
                        </div>

                    </div>

1 Ответов

Рейтинг:
6

Richard Deeming

Начальной загрузки сетки макета состоит из 12 колонок:
Сеточная система · Bootstrap v4.5[^]

Вы указали, что метка должна занимать 2 столбца, а каждый из флажков-2 столбца. Это означает, что все три будут помещаться в один ряд, занимая половину ширины контейнера.

Вы также захотите использовать правильную разметку Bootstrap для своих флажков:
Формы · Bootstrap v4.5[^]

Попробуйте что-нибудь вроде этого:

<div class="form-group row">
    <label class="col-sm-2 col-form-label">Dietary requirements:</label>
    <div class="col-sm">
        <div class="form-check">
            @Html.CheckBoxFor(m => m.DietMain.None, new { @class = "form-check-input" })
            <label class="form-check-label" for="@Html.IdFor(m => m.DietMain.None)">None</label>
        </div>
        <div class="form-check">
            @Html.CheckBoxFor(m => m.DietMain.Halaal, new { @class = "form-check-input" })
            <label class="form-check-label" for="@Html.IdFor(m => m.DietMain.Halaal)">None</label>
        </div>
    </div>
</div>

NB: Судя по предоставленным опциям, они кажутся эксклюзивными - не имеет смысла выбирать как "нет", так и "халяль". Если пользователь может выбрать только один вариант, было бы более разумно использовать список переключателей вместо этого.