Bootstrap中sm断点在旧版为768px，实为历史适配惯性；Bootstrap 5已改为576px，且col-类从0px起效，最小宽度由开发者自定义媒体查询或版本决定。
Bootstrap默认断点中，
起始宽度是768px，但这是历史版本遗留值
Bootstrap 4 和更早版本把
断点设为
，所以很多人误以为“Bootstrap最小宽度就是768px”。实际上，这既不是框架的“最小限制”，也不是现代标准——它只是当时平板设备（如iPad）的常见分界线。
真正决定“最小宽度”的，是你自己写的媒体查询或所用的Bootstrap版本。比如：
Bootstrap 5 完全弃用了
前缀，
（无前缀）默认就在
生效，也就是从最窄屏幕开始响应
在 Bootstrap 5 中对应
，不是768px
如果你没引入任何CSS、也没写媒体查询，那根本不存在“最小宽度限制”——浏览器按自然流式渲染
为什么老项目里总看到768px？这不是Bug，是适配惯性
2012年前后iPad分辨率普遍为768×1024，开发者把横向临界值定在768px，既能区分手机和iPad，又避开iPhone横屏（通常
现在再硬套768px，反而容易出问题：
很多安卓平板竖屏宽度已超800px，但UI仍被归入
样式，导致布局撑开或错位
折叠屏手机（如Pixel Fold）展开后宽度达1000px+，却可能因旧断点逻辑被当成“桌面端”，丢失触控优化
你自定义的
若没加
，会持续生效到4K屏，图标/文字可能越变越大
怎么查自己项目实际生效的最小宽度？
别猜，直接看计算后的样式。打开Chrome DevTools → Elements → 选中目标元素 → 右侧Styles面板，展开
或
，搜索
或
，观察哪条规则在当前视口宽度下被激活。
更准的做法是临时加一段调试代码：
原生Bootstrap旋转木马特效
原生Bootstrap旋转木马特效是一款基于jQuery实现的图片轮播切换代码。
下载
刷新页面，右上角就会显示当前匹配的断点名。注意：Bootstrap 5 的
是
起，但Bootstrap 4 是
起——版本差异必须确认清楚。
想彻底绕过“最小宽度”概念？直接用
+
组合
Bootstrap 5 的
类（如
、
）本质是基于Flexbox的封装，其“最小宽度”由
和容器
共同决定，而非媒体查询强制锁定。
如果你真需要严格控制最小尺寸，优先考虑：
给容器设
（主流手机窄屏下限），而不是依赖断点
用
替代固定列数，让内容决定宽度
避免在
里只写
，务必搭配
限定作用域，否则样式会“泄漏”到更大屏幕
断点数字本身不重要，重要的是你是否清楚每一处
背后的真实设备覆盖意图。现在连
都开始显得宽了——有些折叠屏半展开状态只有540px，而你的
样式还没触发。
smsmmin-width: 768pxxscol-0pxsmmin-width: 576pxsm@media (min-width: 768px)max-widthStylesComputedwidth@media/* 在CSS末尾加 */
@media (max-width: 575.99px) { body::before { content: "xs"; } }
@media (min-width: 576px) and (max-width: 767.99px) { body::before { content: "sm"; } }
@media (min-width: 768px) and (max-width: 991.99px) { body::before { content: "md"; } }
md768px992pxcol-*flexcolcol-6col-sm-4flex-basismin-widthmin-width: 320pxcol-auto@mediamin-widthmax-widthmin-width576pxsm