如何均匀间隔动态复选框引导程序和 iCheck

【问题标题】：How to evenly space dynamic checkboxes bootstrap and iCheck如何均匀间隔动态复选框引导程序和 iCheck
【发布时间】：2017-03-14 14:46:16
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案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

【讨论】：

感谢这种方法对我有用，我将显示修改为 inline-flex，将 justify-content 修改为 flex-start 和 min-width 以使用 px 而不是 em。即使调整大小，它现在也能正确对齐。
@usr4896260 太好了，很高兴它有帮助。