将复选框排列/样式设置为两行 [Bootstrap & AngularJS]

Question

我有一个 AngularJS 应用程序，我需要在该应用程序上收集用户的 Day 首选项。我无法按照我想要的方式进行布局。

days 数组有 8 个项目（7 +“全部”），我希望它排列成 2 行，每行 4。我怎样才能让它自己拆分，以便它与 4 是内联的，但随后会分成一个新行?我不想整天硬编码，因为这样更容易与我的模型相关联。

这是不正确的（当前）布局，以及我希望它的外观...

    <div class="form-group checkbox">
        <p class="h2">When do you usually like to lunch?</p>
        <label ng-repeat="day in days" class="sm" ng-click="dayClicked(day)">
            <input type="checkbox"
                   value="{{day.name}}"
                   ng-model="day.selected">
            {{day.name}}
        </label>
    </div>

Answer 1

试试这样的。

label.sm {
  display: block;
  float: left;
  width: 25%;
}
label.sm:last-child:after {
  clear: both;
  content: " ";
  display: block;
  height: 0px;
  overflow: hidden;
}

添加说明

第一条规则label.sm 针对您的每个标签。它修改标签的默认显示，使其具有特定的宽度。从技术上讲，您可以使用display: inline-block，但一些较旧的浏览器（咳咳 IE）不尊重这一点。将display: block 与float: left 结合起来模拟display: inline-block。指定 width: 25% 会使每个标签的宽度为其容器中可用空间宽度的四分之一 (100% / 4 = 25%)。

第二条规则，label.sm:last-child:after 以组中的最后一个标签为目标，并创建一个伪元素（不在 HTML 中的元素）。伪元素有一个单独的空间用于其内容，跨越其容器的宽度，没有高度，隐藏它给定的空间之外的任何东西（什么都没有），并清除标签设置的浮动标志。