Bootstrap - 栅格系统

里面的行,必须包含在container这样的容器中。

1197462-004bd1afc89c43c4.png
图片.png

container -> 行 -> 列:
只有『列』才能作为直接子元素。

我们可以设置一些padding这些,在列与列之间间隔:


1197462-9a57cb54ccc371d7.png
图片.png

我们通过为第一列和最后一列元素设置负值的margin,从而抵消掉padding的影响。使之成为居中:

1197462-a34dcaf196156ebb.png
图片.png

在栅格系统中,列是通过1~12的值表示其跨越的一个范围:


1197462-3ffbad456e0d998d.png
图片.png

设备的宽度,在大于或者等于阈值的时候,起作用。
并且针对小屏幕


栅格布局

1197462-c8dfbfbb0d140672.png
图片.png

1197462-402b6339b02cbf5d.png
图片.png

1197462-fa521965a94d7845.png
图片.png

一定范围内:


1197462-566ea47c465c3fcd.png
图片.png

lg-md-sm-xs
大屏-中屏-小屏-超小屏
大屏显示器 -一般pc-平板-手机
偏移:
col-lg-offset-3


1197462-e251b66b9cdaa66f.png
图片.png

猜你喜欢

转载自blog.csdn.net/weixin_33713350/article/details/87214317