Bootstrap 5 搭建企业官网需避开四类高频问题：下拉菜单点不动（改data-bs-toggle并引入bootstrap.bundle.min.js）、Banner留白异常（container与container-fluid分用且禁嵌套）、品牌色失效（改Sass变量而非滥用!important）、表单提交刷新（submit事件中首行加event.preventDefault）。
直接用 Bootstrap 5 做企业官网，不是“套个模板就能上线”，而是得避开四类高频翻车点：下拉菜单点不动、Banner 不全宽、品牌色失效、表单一提交就刷新。这些都不是 Bug，是版本迁移和语义误用导致的逻辑断层。
下拉菜单/模态框点击无反应？检查 data-bs-toggle 和 JS 加载链
Bootstrap 5 彻底移除了 jQuery 依赖，但大量教程和旧代码还在用 data-toggle 和 $().dropdown()，这会导致交互静默失效——控制台不报错，只是点不弹。
- 把所有
data-toggle="dropdown"改成data-bs-toggle="dropdown"（同理data-bs-toggle="modal"） - JS 必须引入
bootstrap.bundle.min.js（含 Popper），不能只引bootstrap.min.js，也绝对不要额外加jquery.js - 如果是 JS 动态插入的下拉按钮（比如 AJAX 加载后追加的），不能靠属性自动初始化，得手动调用：
new bootstrap.Dropdown(element) - 用 Webpack/Vite 时，
import * as bootstrap from 'bootstrap'后，组件不会自动绑定事件，仍需显式 new 实例
全屏 Banner 留白、导航栏居中错位？别混用 container 和 container-fluid
常见错误是把 navbar 和 hero 都塞进同一个 container，结果 Banner 被压窄、导航两侧多出 15px 空白——根源是容器语义混淆。
-
navbar放container内：保证 Logo 和菜单文字水平居中，宽度固定（如 1200px） -
hero区域单独用container-fluid，并加px-0清除左右 padding - 禁止
container > container-fluid这种嵌套；Bootstrap 栅格靠row/col+ 断点类生效，不是靠容器嵌套撑开 - 若需 hero 内部文字居中，应在
container-fluid里再套一层container，而不是反过来
自定义品牌色/字体没生效？别急着加 !important
写 .btn-primary { background: #0056b3 !important } 看似快，但很快会发现 hover、focus、disabled 态全乱——因为 Bootstrap 的状态类也带 !important，形成优先级死锁。
- 长期维护推荐走 Sass：修改
$primary、$font-family-sans-serif等变量后重新编译 CSS - 仅用 CDN 时，必须提高 specificity：写成
.btn.btn-primary:hover，而非.btn-primary:hover - 换字体不只改
font-family，还要核对font-weight；比如「阿里巴巴普惠体」Regular 对应 400，但 Bootstrap 按钮默认设font-weight: 600
表单提交后页面刷新？preventDefault 没加或加错位置
企业官网联系表单常要求异步提交+实时验证，但直接绑 submit 事件却不调 event.preventDefault()，就会触发默认跳转或刷新。
- 确保监听的是
form元素的submit事件，不是按钮的click -
event.preventDefault()必须在事件处理函数最开头执行，否则可能被后续逻辑阻断 - 验证失败时也得阻止提交，别只在成功路径里加
preventDefault - 如果用了 Bootstrap 的
Form.Control或其他封装，注意它可能已绑过原生 submit，需检查是否重复绑定
真正卡住人的从来不是“怎么写”，而是“为什么写了没反应”。Bootstrap 5 的容器语义、data 属性前缀、样式覆盖逻辑、事件初始化方式，每一处都和旧版不同。稍不注意，就变成“看着像官网，跑起来处处掉链子”。
