以网格格式显示复选框答案

【问题标题】：display checkboxes in grid format以网格格式显示复选框
【发布时间】：2020-12-20 05:34:30
【问题描述】：

我想以具有 3 列的网格格式显示复选框。类似下面的东西

项目 1 项目 2 项目 3
项目项目 5 项目 6
4
第 7 项第 8 项第 9 项

我可以使用下面的代码以网格格式显示它，但在 Item7 的情况下，它没有正确定位，而是开始在 Item5 下方显示它。我不想这样做。

下面是我正在使用的代码

<div class="row" style="margin-top: 15px; padding-bottom: 15px; margin-left: 5px">
 <div class="col-md-4 ef-batch-options-text checkbox" ng-repeat="x in samples">
       <input type="checkbox" id="user" name="users" value="{{x}}"  />
             {{x}}
 </div>

我也试过用 ul 和

【问题讨论】：

标签： html css angularjs

【解决方案1】：

你可以使用弹性盒子请注意，您应该避免使用内联样式！创建一个style.css 文件，将其与<link rel="stylesheet" href="style.css"> 链接并粘贴以下代码：

.row {
margin-top: 15px;
padding-bottom: 15px;
margin-left: 5px
display: flex;
flex-wrap: wrap;
flex-basis: 33%;
}

【讨论】：

但是如果我有更多的项目，它会如何工作？项目数可以是任何东西。有什么解决办法吗？
如果您可以拥有任意数量的项目并希望它们 3 宽，我认为 flexbox 将是您的最佳选择
谢谢它确实完成了这项工作，但是因为我在手风琴中有这些复选框，并且只有在折叠后才会显示。当我添加这个 CSS 时，放置在它下面的手风琴不会向下移动。
你可以在每个复选框上尝试flex-basis: 33%

【解决方案2】：

form {
  width: 60px;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr;
}

<form>
  <label>
    <input type="checkbox" value=""/>item1
  </label>
  <label>
    <input type="checkbox" value=""/>item2
  </label>
  <label>
    <input type="checkbox" value=""/>item3
  </label>
  <label>
    <input type="checkbox" value=""/>item4
  </label>
  <label>
    <input type="checkbox" value=""/>item5
  </label>
  <label>
    <input type="checkbox" value=""/>item6
  </label>
  <label>
    <input type="checkbox" value=""/>item7
  </label>
  <label>
    <input type="checkbox" value=""/>item8
  </label>
  <label>
    <input type="checkbox" value=""/>item9
  </label>
</form>

【讨论】：

【解决方案3】：

试试Bootstrap grid method，

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row">
  <div class="col-4 text-center">
   <input type="checkbox" id="user" name="users" value=""/>item1
 </div>
 <div class="col-4 text-center">
   <input type="checkbox" id="user" name="users" value=""/>item2
 </div>
 <div class="col-4 text-center">
   <input type="checkbox" id="user" name="users" value=""/>item3
 </div>
 <div class="col-4 text-center">
   <input type="checkbox" id="user" name="users" value=""/>item4
 </div>
 <div class="col-4 text-center">
   <input type="checkbox" id="user" name="users" value=""/>item5
 </div>
 <div class="col-4 text-center">
   <input type="checkbox" id="user" name="users" value=""/>item6
 </div>
 <div class="col-4 text-center">
   <input type="checkbox" id="user" name="users" value=""/>item7
 </div>
 <div class="col-4 text-center">
   <input type="checkbox" id="user" name="users" value=""/>item8
 </div>
  <div class="col-4 text-center">
   <input type="checkbox" id="user" name="users" value=""/>item9
 </div>
</div>

【讨论】：