Bootstrap栅格布局对齐问题

问题描述

使用栅格嵌套布局，添加边框后发现对齐总有问题。

示例代码

    <div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <label title="" class="control-label col-sm-4">传真号码</label><div class="col-sm-8">
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group">
                <label title="" class="control-label col-sm-4">电子邮箱</label><div class="col-sm-8">
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="form-group">
                <label title="" class="control-label col-sm-2">地址</label>
                <div class="col-sm-10">
                </div>
            </div>
        </div>
  </div>

error.png

问题原因

调试发现，设置栅格时，默认设置

padding-right: 15px;
padding-left: 15px;

debugger.png
首行为 6:6 栅格中嵌套 4:8【两次嵌套】，次行 2:10【一次嵌套】，所以对齐显示不正确

解决办法

使用css3 calc() 动态计算

        .col-sm-2 {
            width: calc((100% - 30px)/6);
        }

ok.png