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
上一篇下一篇

猜你喜欢

热点阅读