虽然Bootstrap使用ems或rems来定义大多数大小,但pxs用于网格断点和容器宽度。这是因为视口宽度以像素为单位,并且不随字体大小而变化。 了解Bootstrap网格系统的各个方面如何在具有便捷表的多个设备上工作。
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多 12 列。
Bootstrap 4 网格系统有以下 5 个类:
- .col- 针对所有设备
- .col-sm- 平板 - 屏幕宽度等于或大于 576px
- .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
- .col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
- .col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)
可以多个一起使用 设置在不同设备上显示不同效果
eg:
<div class="col-12 col-sm-3 col-md-6" style="background-color:lavender;"></div>解释:
col-12 ռ12份 在手机上面显示1列
col-3 ռ3份 在平板上面显示4列
col-md-6 ռ6份 在桌面上显示2列