问题描述
使用栅格嵌套布局，添加边框后发现对齐总有问题。
示例代码
<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
