問題描述
使用柵格嵌套布局，添加邊框后發現對齊總有問題。
示例代碼
<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
