Есть ли способ, чтобы мои чекбоксы располагались горизонтально с фиксированным номером с помощью начальной загрузки?

Question

Я не хочу, чтобы мои флажки располагались друг напротив друга, но располагались рядом друг с другом.Но только в столбцах 5. Например,

На данный момент у меня есть что-то вроде этого:

Флажки вертикальные

Но я хочу это:

[x] label [x] label [x] label [x] label [x] label
[x] label [x] label [x] label [x] label [x] label

Это мой код:

      <div class="row form-group">
        <div class="col col-md-3">
          <a data-toggle="collapse" href="#collapsKlassen">
            <h5 class="mb-0">
              Klassen <i class="fas fa-angle-down rotate-icon"></i>
            </h5>
          </a>
        </div>
        <div class="col-12 col-md-9 collapse" id="collapsKlassen"style="margin-right: 5px;">
          <div class="form-check  "  >
            <div >
              @Html.EditorFor(x => x.CheckBoxKlassen)
            </div>
          </div>
        </div>
      </div>

Уже пробовал со встроенной проверкой формы и т. Д., Но без результата.РЕДАКТИРОВАТЬ: Rendered code:

<input id="CheckBoxKlassen_0__ID" name="CheckBoxKlassen[0].ID" type="hidden" value="61" />
<input id="CheckBoxKlassen_0__Display" name="CheckBoxKlassen[0].Display" type="hidden" value="BIO 1Aa" />
<input data-val="true" data-val-required="The WasChecked field is required." id="CheckBoxKlassen_0__WasChecked" name="CheckBoxKlassen[0].WasChecked" type="hidden" value="False" />
<input data-val="true" data-val-required="The IsChecked field is required." id="CheckBoxKlassen_0__IsChecked" name="CheckBoxKlassen[0].IsChecked" type="checkbox" value="true" />
<label for="CheckBoxKlassen_0__IsChecked">BIO 1Aa</label>
<br /><input id="CheckBoxKlassen_1__ID" name="CheckBoxKlassen[1].ID" type="hidden" value="64" />
<input id="CheckBoxKlassen_1__Display" name="CheckBoxKlassen[1].Display" type="hidden" value="BIO 1Ab" />
<input data-val="true" data-val-required="The WasChecked field is required." id="CheckBoxKlassen_1__WasChecked" name="CheckBoxKlassen[1].WasChecked" type="hidden" value="False" />
<input data-val="true" data-val-required="The IsChecked field is required." id="CheckBoxKlassen_1__IsChecked" name="CheckBoxKlassen[1].IsChecked" type="checkbox" value="true" />
<label for="CheckBoxKlassen_1__IsChecked">BIO 1Ab</label>
<br /><input id="CheckBoxKlassen_2__ID" name="CheckBoxKlassen[2].ID" type="hidden" value="58" />
<input id="CheckBoxKlassen_2__Display" name="CheckBoxKlassen[2].Display" type="hidden" value="BIO 1Ac" />
<input data-val="true" data-val-required="The WasChecked field is required." id="CheckBoxKlassen_2__WasChecked" name="CheckBoxKlassen[2].WasChecked" type="hidden" value="False" />
<input data-val="true" data-val-required="The IsChecked field is required." id="CheckBoxKlassen_2__IsChecked" name="CheckBoxKlassen[2].IsChecked" type="checkbox" value="true" />
<label for="CheckBoxKlassen_2__IsChecked">BIO 1Ac</label>
<br /><input id="CheckBoxKlassen_3__ID" name="CheckBoxKlassen[3].ID" type="hidden" value="71" />
<input id="CheckBoxKlassen_3__Display" name="CheckBoxKlassen[3].Display" type="hidden" value="BIO 1Ad" />
<input data-val="true" data-val-required="The WasChecked field is required." id="CheckBoxKlassen_3__WasChecked" name="CheckBoxKlassen[3].WasChecked" type="hidden" value="False" />
<input data-val="true" data-val-required="The IsChecked field is required." id="CheckBoxKlassen_3__IsChecked" name="CheckBoxKlassen[3].IsChecked" type="checkbox" value="true" />
<label for="CheckBoxKlassen_3__IsChecked">BIO 1Ad</label>
<br /><input id="CheckBoxKlassen_4__ID" name="CheckBoxKlassen[4].ID" type="hidden" value="59" />

Answer 1

Вот рабочий пример, к которому вы можете обратиться и внести изменения в соответствии с вашими потребностями.

Модель

 public class CheckBoxKlassen
{
    public int Id { get; set; }
    public string Display { get; set; }

    public bool IsChecked { get; set; }
}

public class CheckBoxViewModel
{
    public IList<CheckBoxKlassen> CheckBoxKlassen { get; set; }
}

CheckBoxList.cshtml , используйте CSS , чтобы выровнять флажки по горизонтали, и измените ширину в процентах <li>, чтобы настроить количество флажков в строке.

@model WebApplication1.Models.CheckBoxViewModel
<style>
  .checkbox-grid li {
    display: block;
    float: left;
    width: 20%;
   }
</style>

<div class="row form-group">
  <div class="col col-md-3">
    <a data-toggle="collapse" href="#collapsKlassen">
        <h5 class="mb-0">
            Klassen <i class="fas fa-angle-down rotate-icon"></i>
        </h5>
    </a>
  </div>
  <div class="col-12 col-md-9 collapse" id="collapsKlassen" style="margin-right: 5px;">
    <div class="form-check  ">
        <ul class="checkbox-grid">
            @for (var i = 0; i < Model.CheckBoxKlassen.Count(); i++)
            {
            <li>
                <input type="checkbox" asp-for="CheckBoxKlassen[i].IsChecked" value="@Model.CheckBoxKlassen[i].Id" />
                <label >@Model.CheckBoxKlassen[i].Display</label>
            </li>

            }
        </ul>
    </div>
  </div>
</div>

Контроллер , получить данные из списка проверки

public IActionResult CheckBoxList()
    {
        CheckBoxViewModel model = new CheckBoxViewModel()
        {
            CheckBoxKlassen = _context.CheckBoxKlassen.ToList()
        };
        return View(model);
    }

Answer 2

Я лично предпочитаю использовать flexbox для подобных случаев. Вы можете проверить супер простое, быстрое объяснение руководства здесь . Это в сочетании с функцией CSS calc . Я нахожу один из лучших способов сделать стиль.

Этот код CSS должен работать:

div.form-check { display: flex; flex-wrap: wrap; width: 100%; }

div.form-check div { flex-basis: 20%; }