Bootstrap栅格布局对齐问题

问题描述

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

示例代码

    
Bootstrap栅格布局对齐问题_第1张图片
error.png

问题原因

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

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

Bootstrap栅格布局对齐问题_第2张图片
debugger.png

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

解决办法

使用css3 calc() 动态计算

        .col-sm-2 {
            width: calc((100% - 30px)/6);
        }
Bootstrap栅格布局对齐问题_第3张图片
ok.png

你可能感兴趣的:(Bootstrap栅格布局对齐问题)