博客
关于我
Bootstrap网格系统
阅读量:177 次
发布时间:2019-02-28

本文共 2965 字,大约阅读时间需要 9 分钟。

一 实现原理

1 代码

    
实现原理
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1

2 效果

二 工作原理

1 代码

    
基本用法
.col-md-4
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-3
.col-md-6
.col-md-3

2 效果

三 列偏移

1 代码

    
列偏移

列向右移动四列的间距

.col-md-4
列向右移动四列的间距
.col-md-2
.col-md-4
列向右移动四列的间距

发生行断裂

.col-md-4
列向右移动四列的间距
.col-md-2
.col-md-4
列向右移动四列的间距
.col-md-3
col-md-offset-3
.col-md-4

2 效果

四 列排序

1 代码

    
列排序
.col-md-4
.col-md-8

2 效果

五 列的嵌套

1 代码

    
列的嵌套
col-md-6
col-md-6
col-md-4
.col-md-4
col-md-4
col-md-4
col-md-4

2 效果

 

转载地址:http://odgj.baihongyu.com/

你可能感兴趣的文章