Twitter bootstrap 复选框使用引导3进行水平对齐

我有一个Thymeleaf/Bootstrap 3视图，其中包含以下代码，用于迭代我的复选框列表并垂直显示它们：

设施

如果您不担心订单，只需浮动复选框即可。根据引导文档示例，您需要在每个复选框之前添加一个

div

（请参阅）

HTML应如下所示：

<!--not worried about order-->
<div class="row no-order">
<div class="form-group-lg col-xs-5">
<label class="control-label" for="facilities">Facilities</label>
<div class="form-group-lg clearfix">
<!--if this is your looped div, then you can just put the class "checkbox" in here-->
  <div th:each="facility : ${facilities}"> 
    <div class="checkbox"><label class="checkbox-inline" th:text="${facility}">
    <input type="checkbox" th:field="*{checkedItems}" th:value="${facility}" />
    1</label></div>

    <div class="checkbox"><label class="checkbox-inline" th:text="${facility}">
    <input type="checkbox" th:field="*{checkedItems}" th:value="${facility}" />
    2</label>
    </div>
    <div class="checkbox"><label class="checkbox-inline" th:text="${facility}">
    <input type="checkbox" th:field="*{checkedItems}" th:value="${facility}" />
    3</label></div>
    <div class="checkbox"> <label class="checkbox-inline" th:text="${facility}">
    <input type="checkbox" th:field="*{checkedItems}" th:value="${facility}" />
    4</label></div>
    <div class="checkbox">
      <label class="checkbox-inline" th:text="${facility}">
    <input type="checkbox" th:field="*{checkedItems}" th:value="${facility}" />
    5</label>
    </div>
    <div class="checkbox"><label class="checkbox-inline" th:text="${facility}">
    <input type="checkbox" th:field="*{checkedItems}" th:value="${facility}" />
   6</label></div>
  </div>
</div>

但是，如果您需要保持顺序（1后面的2，而不是1的一侧），并且想要一个纯CSS解决方案，那么您在浏览器支持方面就麻烦了，因为您必须使用“列”。请参阅此处的canIUse:。我想可以找到jQuery/Javascript解决方案，为您提供更好的灵活性

HTML（顺序保持-除了添加了

复选框组

外，基本相同）：

---

这是我的代码笔：

使用Css列来完成此操作。简单。使用以下代码：

已更新在上查看此实况演示

---

我不确定它有多实用，但您可以在每组复选框周围嵌套

列

，并将其包含在迭代中，或者为了获得更多控制，您可以使用CSS自己浮动复选框

嵌套列示例：

设施
厕所
酒吧
餐厅
免费无线上网
礼品店
免费咖啡/茶
电视
床
别的
输入

设施
一个
两个
三
四
五
六
七
八
九
输入

谢谢Sarower Jahan

.no-order div.checkbox{
   float:left;
   width:50%
 }

<div class="row ordered">
<div class="form-group-lg col-xs-5">
<label class="control-label" for="facilities">Facilities</label>
<div class="form-group-lg">
  <div th:each="facility : ${facilities}" class="checkbox-group">
    <div class="checkbox"><label class="checkbox-inline" th:text="${facility}">
    <input type="checkbox" th:field="*{checkedItems}" th:value="${facility}" />
    1</label></div>

    <div class="checkbox"><label class="checkbox-inline" th:text="${facility}">
    <input type="checkbox" th:field="*{checkedItems}" th:value="${facility}" />
    2</label>
    </div>
    <div class="checkbox"><label class="checkbox-inline" th:text="${facility}">
    <input type="checkbox" th:field="*{checkedItems}" th:value="${facility}" />
    3</label></div>
    <div class="checkbox"> <label class="checkbox-inline" th:text="${facility}">
    <input type="checkbox" th:field="*{checkedItems}" th:value="${facility}" />
    4</label></div>
    <div class="checkbox">
      <label class="checkbox-inline" th:text="${facility}">
    <input type="checkbox" th:field="*{checkedItems}" th:value="${facility}" />
    5</label>
    </div>
    <div class="checkbox"><label class="checkbox-inline" th:text="${facility}">
    <input type="checkbox" th:field="*{checkedItems}" th:value="${facility}" />
   6</label></div>
  </div>
</div>

  .ordered .checkbox-group{
  -webkit-columns: 2 150px;
  -moz-columns: 2 150px;
  columns: 2 150px;
  -webkit-column-gap: 2em;
  -moz-column-gap: 2em;
  column-gap: 2em;
 }
 .ordered div.checkbox{
  -webkit-column-span: all;
  -moz-column-span: all;
  column-span: all;
 }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="form-group-lg col-xs-5">
    <label class="control-label" for="facilities">Facilities</label>
    <div class="form-group-lg">
      <div th:each="facility : ${facilities}" class="column_2">
        <input type="checkbox" th:field="*{checkedItems}" th:value="${facility}" />
        <label class="checkbox-inline" th:text="${facility}"></label>
      </div>
    </div>
  </div>
</div>

.column_2{
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}