BootstrapCSS之 Grid System 学习

阅读更多

使用 BoostrapCSS 根据页面宽度自适应的CSS类
Responsive Breakpoint Classes

1、BoostrapCSS 宽度自适应的行为：
BoostrapCSS 是如何做到宽度自适应的？或 什么是 BoostrapCSS 的宽度自适应？
即：当页面宽度达到或小于规定的数值时，每一列宽度将会变为 页面宽度的 100% 。

2、共5个宽度级别的自适应类。

To make the grid responsive, there are five grid breakpoints,
one for each responsive breakpoint:

.col-
    - (suits for) all breakpoints (extra small),
      For grids that are the same from the smallest of devices to the largest,
      use the .col and .col-* classes.

.col-sm-
    - small,
      Only breaks on small device's width of: 540px

.col-md-
    - medium,
      Only breaks on medium device's width of: 720px

.col-lg-
    - large,
      Only breaks on medium device's width of: 960px

.col-xl-
    - extra large
      Only breaks on medium device's width of: 1140px

我最常用的是： .col-md- 级别








转载请注明，
原文出处：http://lixh1986.iteye.com/blog/2429121








引用：
https://getbootstrap.com/docs/4.1/layout/grid/