在 Bootstrap 3 中使用 checkbox-inline class 時，可能會遇到第一行會有凸排的問題
1 | <div class="row"> |
2 | <div class="col-md-12 form-horizontal"> |
3 | <div class="form-group"> |
4 | <div class="col-md-12"> |
5 | <div class="checkbox-inline"> |
6 | <input type="checkbox" value="1"> |
7 | XXXX |
8 | </div> |
9 | <div class="checkbox-inline"> |
10 | <input type="checkbox" value="2"> |
11 | XXXX |
12 | </div> |
13 | </div> |
14 | </div><!-- end .form-group --> |
15 | </div><!-- end .col-md-12 --> |
16 | .... |
17 | </div><!-- end .row --> |
解決方法
利用 CSS 操作第一筆，將第一筆縮排
1 | .checkbox-inline:first-child { |
2 | margin-right: 0; |
3 | margin-left: 10px; |
4 | } |