排列/样式复选框分为两行[Bootstrap＆AngularJS]

Question

I have an AngularJS app on which I need to collect Day preferences from the user. I'm having trouble getting it laid out how I want it.

The days array has 8 items (7 + "All"), and I want it arranged in 2 rows of 4. How can I get it to split itself so it's inline for the 4, but then breaks into a new row? I'd like to do this without hard coding all of the days since it's easier to relate to my model this way.

And here's the incorrect (current) layout, and how I want it to look...

    <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

Try something like this.

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

Added explanation

The first rule, label.sm , targets each of your labels. It modifies the default display of a label so it will have a specific width. You can technically use display: inline-block , but some older browsers ( cough cough IE) don't respect that. Combine display: block with float: left to emulate display: inline-block . Specifying width: 25% makes each label one-fourth (100% / 4 = 25%) the width of the available space in its container.

The second rule, label.sm:last-child:after targets the last of the labels in the group and creates a pseudo-element (an element that isn't in the HTML). The pseudo-element has a single space for its contents, spans the width of its container, has no height, hides anything outside of the space it's been given (which is nothing), and clears the float flag set by the labels.