Bootstrap4 网格系统

匿名 (未验证) 提交于 2019-12-02 23:52:01

虽然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

 

 

 

 

转载请标明出处:Bootstrap4 网格系统
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!