Bootstrap响应式设计核心原理是viewport元标签、预设断点+媒体查询、Flexbox栅格系统三者协同驱动；缺一不可，其中viewport标签为前提，确保移动端按真实设备宽度解析，否则断点失效、布局错乱。
Bootstrap响应式设计的核心原理不是“一堆类名堆出来就能自适应”，而是由三样东西咬合驱动的：viewport 元标签强制移动浏览器正确解析视口、预设的断点 + 媒体查询控制布局切换、基于 Flexbox 的 12 列栅格系统在不同断点下动态重排。缺一不可，改掉任何一个，col-md-6 就可能不生效，container 就可能撑不满屏。
为什么 <meta name="viewport"> 是前提，不是可选项
没有它，移动端浏览器会按桌面视口（通常约 980px）渲染页面，然后整体缩放显示——这时你写的 col-sm-12 实际上被压在一个虚拟大屏里，媒体查询根本不会触发。所有 Bootstrap 断点（xs/sm/md 等）都依赖真实设备宽度判断，而这个“真实宽度”必须靠 viewport 告诉浏览器：“别猜，就按物理像素来”。
常见错误：
- 复制模板时漏掉这行，或写成
width=1000这类固定值 - 在 Vue/React 单页应用中，只在入口 HTML 写了，但子路由页面没继承（其实只要根 HTML 有就行）
- 用 Cordova 或 WebView 加载时，宿主环境禁用了 viewport 缩放控制
container 类的宽度逻辑和断点对应关系
container 不是简单设个 max-width，它是按 Bootstrap 官方断点阶梯式定义的：
-
xs（100% -
sm（≥576px）：540px -
md（≥768px）：720px -
lg（≥992px）：960px -
xl（≥1200px）：1140px -
xxl（≥1400px）：1320px
注意：这些值在 Bootstrap 5+ 中已更新，旧教程里常见的 970px/1170px 是 Bootstrap 3/4 的遗留值。如果你项目还在用 4.x，但查的是 5.x 文档，container 表现就会对不上。
row 和 col-* 怎么靠 Flexbox 实现“自动换行”
关键不在百分比计算，而在 row 默认是 display: flex，且设置了 flex-wrap: wrap。这意味着：
- 当所有
col-子项总宽度超 100%，它们不会溢出，而是自动折到下一行 -
col-6在小屏下占一半，在大屏下加了col-lg-4就变成三分之一——这不是 JS 计算的，是 CSS 媒体查询直接切换了flex-basis和max-width - 嵌套
row时，内层row的负外边距（-15px）会抵消col的左右15px内边距，否则会出现双倍间隙
容易踩的坑：col 直接放在 body 下，没包 row；或者用了 row 却忘了清除浮动（Bootstrap 5 已弃用 clearfix，全靠 Flex 解决）。
断点类名失效的典型场景和排查路径
看到 col-md-6 在平板上还是竖排？先别怀疑框架，按顺序检查：
- 页面是否加载了 Bootstrap CSS（特别是
bootstrap.min.css，不是仅引入 JS） - 浏览器开发者工具里，检查该元素是否被其他 CSS（比如自定义样式或重置库）覆盖了
flex属性 - 在 “Computed” 面板看
flex-basis和max-width是否被媒体查询正确设置 - 是否误用了
col-12 col-md-6但父容器宽度本身就被限制在 300px（比如图片容器没设width: 100%）
最常被忽略的一点：断点类名只控制“列宽”，不控制内容尺寸。图片不设 img-fluid，文字不设响应式字号，再好的栅格也救不了溢出和错位。
