bootstrap 栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。

栅栏系统简介
  • “行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。
  • 通过为“列(column)”设置 padding 属性,从而创建列与列之间的间隔(gutter)。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding,也就间接为“行(row)”所包含的“列(column)”抵消掉了padding
bootstrap 栅格系统_第1张图片
栅栏参数
栅栏系统示例
1> 水平排列
.col-md-3
.col-md-3
.col-md-3
.col-md-3
2> col超过12将会重起一行
.col-md-3
.col-md-3
.col-md-3
.col-md-3
bootstrap 栅格系统_第2张图片
3> 响应式列重置
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
bootstrap 栅格系统_第3张图片
屏幕缩小时的情况

列重置只要是为了处理某些列可能会出现比别的列高的情况,在屏幕缩小时保证按照顺序进行排列

4> 列偏移
 
.col-md-4
.col-md-4 .col-md-offset-4
  • 当偏移数值和第二个网格大小和大于12时将会重起一行
 
.col-md-4
.col-md-4 .col-md-offset-4
bootstrap 栅格系统_第4张图片
5> 嵌套列

你可能感兴趣的:(bootstrap 栅格系统)