Bootstrap栅格布局对齐问题
2016-07-22 本文已影响1109人
过桥
问题描述
使用栅格嵌套布局,添加边框后发现对齐总有问题。
示例代码
<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