在 Bootstrap 3 中使用 checkbox-inline class 時,可能會遇到第一行會有凸排的問題

<div class="row">
    <div class="col-md-12 form-horizontal">
        <div class="form-group">
            <div class="col-md-12">
                <div class="checkbox-inline">
                    <input type="checkbox" value="1">
                    XXXX
                </div>
                <div class="checkbox-inline">
                    <input type="checkbox" value="2">
                    XXXX
                </div>
            </div>
        </div><!-- end .form-group -->
    </div><!-- end .col-md-12 -->
    ....
</div><!-- end .row -->

解決方法
利用 CSS 操作第一筆,將第一筆縮排

.checkbox-inline:first-child {
    margin-right: 0;
    margin-left: 10px;
}
Categories: Bootstrap