Bootstrap 5 落地页需引入 bootstrap.bundle.min.js（含 Popper）才能启用折叠菜单、轮播图等交互功能；首屏 Hero 应用 container-fluid 避免 padding 挤压；col-6 在小屏仍单列，需配合 col-sm-6 等响应式类实现始终两列。
Bootstrap 5 落地页不加 bootstrap.bundle.min.js 就动不了
很多刚拖完 Bootstrap 组件发现按钮没反应、导航栏点不开，核心就是漏了 JS 文件。CDN 引入时只加了 bootstrap.min.css，但折叠菜单、轮播图、模态框这些全依赖 bootstrap.bundle.min.js（含 Popper）。单独引 bootstrap.min.js 也不行——它不带 Popper，下拉和 Tooltip 直接报 TypeError: Popper is not a constructor。
实操建议：
- 优先用
bootstrap.bundle.min.js，一行搞定依赖 - 如果已用其他 Popper 版本，才考虑
bootstrap.min.js+ 手动配 Popper，否则纯增复杂度 - JS 必须放在
</body>前，或加defer属性，否则 DOM 没加载完就执行会失效
落地页首屏高度被 container 或 row 吃掉一半
写个满屏 Hero 区域，结果顶部留白巨大、背景图只显示上半截——大概率是套了 container 或 row。Bootstrap 的 container 默认有左右 padding，row 有负 margin 抵消，但一旦嵌套在非标准结构里（比如直接放 body 下又加了 container），就会挤压可用空间。
实操建议：
- 首屏 Hero 用
container-fluid，它不设 max-width，左右贴边 - 避免在
container-fluid里再套container，层级一多 padding/margin 就打架 - 需要居中文案但又不想受限于栅格？直接用
text-center+mx-auto控制宽度，比硬套 row/col 更可控
col-* 在小屏上突然堆成一列，但设计稿要求“始终两列”
写了个 <div class="col-6">，本意是“所有屏幕都占一半”，结果手机上看还是竖排单列——因为 col-6 只对超小屏（
实操建议：
- 要“始终两列”，得写
col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6，或者更干脆用col-6 col-sm-6（sm 起就覆盖所有更大尺寸） - 别依赖“默认行为”，Bootstrap 5 的
col（无数字）才是等宽自适应，col-6是明确切分 - 检查 DevTools 的“Toggle device toolbar”，在不同宽度下看 class 是否真的被激活，别凭感觉猜
字体、颜色、间距和设计稿对不上，改来改去全是 !important
直接拿 Bootstrap 的 CSS 写落地页，很快会陷入覆盖战：想调个按钮圆角，发现 btn 类里写了 border-radius: 0.375rem，你加个 rounded-0 不生效，最后只能上 !important。根源是 Bootstrap 的 CSS 优先级高，且 utility 类之间存在隐式覆盖顺序（比如 px-4 和 mx-auto 同时用，margin 会吃掉 padding 效果）。
实操建议：
- 定制前先看
_variables.scss，改$spacer、$font-size-base等变量，编译一次全局生效，比零敲碎打强 - 真要局部覆盖，用带命名空间的 class（如
hero-btn）+ 自定义 CSS，别跟btn-primary死磕 - 警惕 utility 类叠加副作用：比如
mt-5 mb-3和my-4同时存在，后者会覆盖前者，浏览器开发者工具里看 computed style 最准
落地页真正卡住的，往往不是“怎么用 Bootstrap”，而是“哪一层该由 Bootstrap 管，哪一层该自己定”。栅格和组件可以借，但品牌色值、字重节奏、呼吸感间距，必须从变量层切进去，不然越往后越难收口。
