html - 如何均匀间隔动态复选框 bootstrap 和 iCheck

Question

我是 bootstrap 和 CSS 的新手。使用 asp.net razor，我生成了一组带有 Bootstrap 和 iCheck 的动态复选框。插入。通过在 CSS 中对宽度进行硬编码，我可以获得一组固定输入标签的适当间距。但是，一旦我调整页面大小时，这就会中断。然后我尝试将复选框放在表格中，但在调整大小时它也不起作用。

为 8 个 input 标签硬编码的 css 是:

.form-group label {
    display: inline-block; 
    min-width: 6em;
}

基于我的 jfiddle ，我想实现的是在 Form Group 部分，甚至复选框间距，甚至页面都调整大小。

我的问题是，给定一组 动态 input 标签，在调整大小时，均匀分布复选框间距的正确方法是什么？

Answer 1

将输入和标签包装在一个名为 wrap 的新 div 中

<div class="form-group">
  <div class="wrap">
    <input id="car1" class="checkbox-inline" type="checkbox" checked>
    <label for="car1" class="checkbox-label">Car</label>
  </div>
  <div class="wrap">
    <input id="car2" class="checkbox-inline" type="checkbox" checked>
    <label for="car2" class="checkbox-label">Sedan</label>
  </div>
...
</div>

使用 flexbox，您可以在 form-group 上使用 justify-content 和 flex-wrap 来分发新的 div:

.form-group {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

你也可以给 div wrap 一个最小宽度

.form-group .wrap {
  min-width: 8em;
}

jsfiddle