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>

已经尝试使用内联的formcheck等，但是没有给出结果。编辑：呈现的代码：

<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。您可以检查a super easy, fast explaining guide here。结合CSS calc function。我找到了进行样式设计的最佳方法之一。

此CSS代码应该可以工作：

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

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

有没有一种方法可以使我的复选框使用引导程序水平固定固定水平的数量？

2 个答案: