学科分类

使用类前缀设置列的宽度

在前面的内容中讲解了类前缀的基本概念,我们知道不同的类前缀代表不同的屏幕设备。由于栅格系统就是默认将父元素分成12等份,所以可根据占据的份数来设置子元素的宽度,下面主要讲解如何通过类前缀设置每列的宽度。

使用类前缀设置列的宽度的基本语法如下。

col-栅格的数量(设置超小设备);

col-sm-栅格的数量(设置平板);

col-md-栅格的数量(设置桌面显示器);

col-lg-栅格的数量(设置大桌面显示器);

col-xl-栅格的数量(设置超大桌面显示器);

上述代码中,在设置列的宽度时,只需要在不同的类前缀后面加上栅格数量即可。例如col-sm-4,表示子元素占据4等份,那么就相当于设置子元素的宽度为25%。

点击此处
隐藏目录