必须加的，它启用移动端渲染模式，缺失会导致Bootstrap响应式栅格（如col-md-4）失效，页面缩成一团、导航栏不折叠、按钮溢出屏幕。
直接用 CDN 引入 Bootstrap 5，配好 <meta name="viewport">，就能跑起来——不是“理论上可以”，而是复制粘贴后刷新页面立刻有响应式导航栏和卡片。
必须加的 <meta name="viewport"> 是什么？
没它，Bootstrap 的响应式栅格（比如 col-md-4）在手机上会失效：文字缩成一团、导航栏不折叠、按钮挤出屏幕。这不是样式问题，是浏览器根本没开启移动端渲染模式。
-
<meta name="viewport" content="width=device-width, initial-scale=1">必须放在里，且要在所有 CSS 引入之前 - 漏掉或写错（比如写成
width=device）会导致整个响应式布局“静音”——页面看起来像桌面版被强行缩小，但实际断点完全不触发 - 部分旧教程用
user-scalable=no，现在不推荐：它会禁用双指缩放，影响可访问性
bootstrap.bundle.min.js 和单独引入 popper.js 有什么区别？
Bootstrap 5 的下拉菜单、Tooltip、Popover 等组件依赖 Popper.js 做定位计算。如果你只引了 bootstrap.min.js（不含 Popper），点击下拉按钮会报错：TypeError: Popper is not a constructor，菜单根本打不开。
- 推荐直接用
bootstrap.bundle.min.js：它已内置 Popper，一行搞定，适合新手 - 如果手动拆开引，顺序必须是：
popper.js→bootstrap.min.js，且两个都要通过 CDN 或本地加载 -
bundle版本体积略大（约 20KB 多），但省去兼容性排查时间；对第一个页面来说，这点带宽不构成瓶颈
为什么 <nav></nav> 下的内容被遮住了？
用了 navbar-fixed-top 或 fixed-top 类后，导航栏脱离文档流，但后面的内容不会自动下移——它就叠在导航栏下面，导致首段文字被盖住。
- 最简单解法：给紧接在
<nav></nav>后面的容器加pt-5或mt-5（Bootstrap 5 的 padding/margin 工具类） - 更规范的做法：用
全局预留顶部空间，避免每个页面都重复加 class - 注意：别用
margin-top: 56px这类硬编码值——不同设备导航栏高度不同，pt-5是响应式安全的
真正卡住新手的，往往不是“怎么写”，而是某个 <meta> 少了、某个 bundle 没引对、或者以为加了 fixed-top 就万事大吉却忘了内容避让。这些地方一错，页面看起来“动不了”，但控制台可能连报错都没有——得靠经验知道该查哪。
