Bootstrap 4.3 本身严格遵循移动优先（mobile-first）设计原则，但若页面缺少 标签，浏览器将默认以桌面视口渲染，导致 .col-6 等移动端断点样式不生效、布局无法堆叠。
bootstrap 4.3 本身严格遵循移动优先（mobile-first）设计原则，但若页面缺少 `` 标签，浏览器将默认以桌面视口渲染，导致 `.col-6` 等移动端断点样式不生效、布局无法堆叠。
在 Bootstrap 4.x 中，“移动优先”并非仅指 CSS 类名顺序，而是一套完整的响应式策略：所有基础栅格类（如 .col-6、.col）默认作用于 xs（.col-md-6）则在满足最小视口宽度（≥768px）时才覆盖低断点样式。然而，这一机制高度依赖浏览器正确识别设备视口尺寸。
你遇到的问题——.col-6 未在手机上生效、按钮始终按 .col-md 行为展开、无法垂直堆叠——根本原因极大概率是：HTML 中缺失 viewport 元标签。
✅ 正确做法：立即添加 viewport 元标签
在 中 <link> 样式表之前，插入以下标准声明：
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
? 为什么这至关重要？
width=device-width：将页面宽度设为设备屏幕宽度（而非默认的 980px 桌面视口）；initial-scale=1：确保页面以 1:1 比例缩放，避免自动缩放导致断点误判；shrink-to-fit=no（iOS Safari 旧版兼容）：防止 Safari 自动压缩内容以适应视口。
⚠️ 其他潜在干扰因素（排查建议）
虽然 viewport 是首要原因，也请同步检查：
-
Bootstrap 版本完整性：你使用的是
4.3.1CDN（正确），但需确认未被其他 CSS 覆盖.col-*的flex-basis或max-width； -
父容器限制：确保
.col-6所在的.row未被固定宽度或overflow: hidden等样式破坏弹性布局； -
类名冲突：你的代码中存在
<div class="col-6 col-md mb-2"> —— 注意：<code>.col-md是无效类（Bootstrap 4 中应为.col-md-6或.col-md-auto）。当前写法会导致.col-md解析失败，退回到.col-6，但若 viewport 缺失，.col-6本身也无法触发。✅ 修正为：<div class="col-6 col-md-3 mb-2"> <!-- 在 md+ 屏幕占 3/12 列 -->
✅ 修复后的典型移动优先结构示意
<!-- 正确的响应式按钮组（手机：双列堆叠；平板+：四等分布局） --> <div class="row g-2"> <div class="col-6 col-md-3"> <button class="btn btn-primary w-100">25%</button> </div> <div class="col-6 col-md-3"> <button class="btn btn-primary w-100">50%</button> </div> <div class="col-6 col-md-3"> <button class="btn btn-primary w-100 is-active">85%</button> </div> <div class="col-6 col-md-3"> <button class="btn btn-primary w-100">100%</button> </div> </div>? 总结
Bootstrap 的移动优先不是“自动生效”的魔法，而是依赖标准化的 HTML 元信息与语义化类名组合。缺失 viewport 标签是生产环境中导致响应式失效的头号原因，务必作为项目初始化 checklist 的第一项。添加后，
.col-6将在手机端正确占据 50% 宽度并垂直堆叠，.col-md-3则在 ≥768px 时精准分配四分之一空间——这才是 Bootstrap 4.3 移动优先设计的真正落地。
