2022-05-22 分类：默认 作者：admin 阅读（28）
| 断点 | 类中缀 | 分辨率 |
|---|---|---|
| X-Small（超小，一般是手机） | None | <576px |
| Small（小，平板或者老笔记本） | sm | ≥576px |
| Medium（中，窄屏电脑） | md | ≥768px |
| Large（大，宽屏电脑） | lg | ≥992px |
| Extra large（超大，宽屏电脑） | xl | ≥1200px |
| Extra extra large（特大，高清电脑或广告设备） | xxl | ≥1400px |
隐藏元素
d-none: 无条件隐藏
d-sm-none: 设备尺寸大于等于sm时隐藏
d-md-none: 设备尺寸大于等于md时隐藏
d-lg-none: 设备尺寸大于等于lg时隐藏
d-xl-none: 设备尺寸大于等于xl时隐藏
显示元素
d-sm-block: 设备尺寸大于等于sm时显示
d-md-block: 设备尺寸大于等于md时显示
d-lg-block: 设备尺寸大于等于lg时显示
d-xl-block: 设备尺寸大于等于xl时显示
组合
d-none d-sm-block: 设备尺寸小于sm时隐藏
d-none d-md-block: 设备尺寸小于md时隐藏
d-none d-lg-block: 设备尺寸小于lg时隐藏
d-none d-xl-block: 设备尺寸小于xl时隐藏
总结
设备查询默认是向上的，例如d-sm-block，表示当设备在sm、md、lg、xl尺寸下都显示
没有d-xs-* 因为当*为block时无条件显示，当*为none时无条件隐藏，效果鸡肋
按屏幕展示：
|
1 2 3 4 5 6 7 8 9 10 |
<div class="container"> <div class="row"> <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div> <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div> </div> <div class="row"> <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div> <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div> </div> </div> |
来源：https://www.bootstrap.cn/doc/read/190.html
https://blog.csdn.net/TL18382950497/article/details/108171265
https://code.z01.com/bootstrap/layout/columns.html
「三年博客，如果觉得我的文章对您有用，请帮助本站成长」
下一篇：【设计模式】简单工厂模式
分别用不同厚度的筏板定义，画图后这设置筏板变截面处理。 http://f.fwxgx.co...
评：新文章！分别用不同厚度的筏板定义，画图后这设置筏板变截面处理。 http://f.fwxgx.co...
评：新文章！新增一个框架图！ http://biji.jinli.vip/wp-content/upl...
评：新文章！嗨，这是一条评论。 要开始审核、编辑及删除评论，请访问仪表盘的“评论”页面。 评论者头像来自...
评：世界，您好！
共有 0 - bootstrap 移动优先与Bootstrap的断点