Question

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

8个input标签的硬编码是：

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

根据我的jfiddle，我想要实现的是表单组部分，即使是复选框间距，甚至页面也会调整大小。

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

Answer 1

将输入和标签包装在名为if (listView1.SelectedIndices.Count > 0) { int selectedIndex = listView1.SelectedIndices[0]; }

的新div中

wrap

使用flexbox，您可以使用<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>上的justify-content和flex-wrap来分发新的div：

form-group

你也可以给div .form-group { display: flex; justify-content: space-between; flex-wrap: wrap; }一个最小宽度

wrap

jsfiddle

如何均匀分隔动态复选框bootstrap和iCheck

1 个答案: