根本原因是Bootstrap 3的float布局与v5的flex模型冲突，导致.row塌陷、.col-*宽度失效、间距翻倍；应通过.legacy-grid隔离并重置样式，而非硬加!important。

直接改 CSS 文件加 !important 或靠覆盖样式硬顶，99% 会越修越乱。根本问题是 Bootstrap 3 到 5 的底层模型、类名体系、变量机制全变了，不是“缺几个前缀”或“少几条 margin”的事。

为什么旧 CSS 在 v5 下大面积失效

Bootstrap 3 的 .row 是 float 布局，.col-xs-6 依赖 float: left + width；v5 的 .row 是 display: flex 容器，.col-6 是 flex item。两者混用时：

• .row 高度塌陷（浮动子项脱离文档流，flex 容器算不出高度）
• .col-* 宽度失效（flex: 1 对浮动元素不生效）
• 旧 CSS 里的 margin-right: -15px 和 v5 的 --bs-gutter-x 叠加，列间距翻倍
• DevTools 里看 .row 的 computed display：如果是 flex，但子项有 float，就是模型冲突

保留旧 HTML 结构但让栅格正常工作

不重写模板的前提下，用 .legacy-grid 层级隔离 + 显式重置是最稳的路径：

• 给旧区块外层加包裹：<div class="legacy-grid">...</div>
• 在自定义 SCSS 或 <style> 中写：

  .legacy-grid { display: block; }
  .legacy-grid::after { content: ""; display: table; clear: both; }
  .legacy-grid [class*="col-"] { float: none; width: auto; flex: 0 0 auto; }
  .legacy-grid .row { --bs-gutter-x: 0; --bs-gutter-y: 0; }

• 若旧布局用 inline-block，补一句：.legacy-grid * { vertical-align: top; }

工具类和组件样式怎么对齐

v5 的工具类命名逻辑彻底重构，不能指望 ml-3 自动映射到 margin-left: 1rem：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

立即学习“前端免费学习笔记（深入）”；

• ml-3/mr-3 已废弃，必须换成 ms-3/me-3（start/end 语义）
• text-center 还在，但 text-sm-center 没了——断点只保留在栅格和显示类上
• .btn-default（v3）在 v5 中不存在，对应的是 .btn-outline-secondary 或自定义 $secondary 变量
• 表单控件字号从 1rem 提到 1.0625rem，.form-control 的 padding 值也变了，老样式里写的 height: 34px 很可能撑破

JS 组件和 data 属性必须全部重写

Bootstrap 5 彻底移除 jQuery 依赖，且所有 data 属性加了 bs- 命名空间：

• data-toggle="modal" → 必须改成 data-bs-toggle="modal"，否则 JS 完全不识别
• $('[data-toggle="collapse"]').collapse() 全部失效，得重写为：new bootstrap.Collapse(el)
• 第三方插件如 bootstrap-datepicker 若没声明支持 v5，data-date-format 等属性可能被忽略，得查它最新版的 release note
• Modal、Tooltip 等动态插入的 DOM 默认 append 到 document.body，如果页面用了命名空间（如 .my-bs），必须显式传 container: '.my-bs'

最常被忽略的一点：browserslist 配置不匹配真实机型，会导致 gap、aspect-ratio 这类属性压根没加前缀，iOS 16.4 上直接白屏。别信 “last 2 versions”，要写死 iOS >= 16.4 并用 npx browserslist 验证输出。