<p>Bootstrap 5 中 .media 类被正式移除，需用 d-flex + align-items-start + gap-3 替代；data-bs-toggle 与 .media 无关，但常共存于旧代码中易混淆；嵌套缩进需手动添加 ms-* 类或自定义 CSS。</p>
Bootstrap 5 里 .media 类确实被删了
不是你漏写了 class，也不是浏览器缓存问题——.media 在 Bootstrap 5 中被**正式移除**，官方文档里已无该组件条目。它不像 .img-responsive 那样只是改名，而是彻底下线。如果你从 v3/v4 升级过来，页面上所有 <div class="media"> 布局会直接失去语义和默认样式，图像和文字堆叠、间距错乱、对齐失效都是常态。
用 d-flex + gap 替代最稳妥
官方推荐路径是 Flexbox 工具类组合，核心就是 d-flex + align-items-start + gap-3。这比硬套栅格更轻量，也更符合现代布局直觉：
-
d-flex启用弹性容器，替代旧版.media的 display 行为 -
align-items-start确保头像顶部对齐（旧版.media-body默认就是这么干的） -
gap-3控制图文间距，比手动写me-3或pe-3更干净，且自动适配 flex-direction - 图像加
flex-shrink-0防止在窄屏下被压缩变形
示例结构：
<div class="d-flex align-items-start gap-3">
<img src="avatar.jpg" class="rounded flex-shrink-0" width="64" height="64">
<div>
<h5 class="mb-1">张三</h5>
<p class="mb-0 text-muted">这条评论写得真不错</p>
</div>
</div>
data-bs-toggle 和 .media 没关系，但容易一起翻车
升级时很多人卡在两件事上：一是 data-toggle 报错导致下拉菜单不展开，二是 .media 布局崩了，误以为是同一套机制的问题。其实它们毫无关联：data-bs-toggle 是 JS 插件触发器，.media 是纯 CSS 布局类。但二者常出现在同一段旧代码里（比如评论列表带折叠操作），所以排查时容易混淆。
- 只要页面里还残留
data-toggle="collapse"，对应 JS 功能就完全静默失效，控制台也不报错 -
.media失效则表现为视觉塌陷，没有 warning，只有“看起来不对劲” - 建议升级后先全局搜索
data-toggle和.media，分两批替换，别混在一起改
嵌套媒体对象现在得靠 ms-5 或 ps-4 手动缩进
v3/v4 的 .media-list + 子 .media 可以自动处理层级缩进，v5 里没了这个约定。想实现评论回复嵌套，得自己加左距：
- 用
ms-4（margin-start）比ml-4更语义清晰，且支持 RTL - 如果嵌套深，建议定义一个局部 CSS 类（如
.media-reply），避免满屏ms-*难维护 - 别依赖
.col-auto+.col模拟缩进——flex 容器里栅格行为不稳定，尤其在响应式断点切换时
真正麻烦的不是怎么写，而是旧项目里那些藏在 JS 模板字符串里的 .media 字符串，grep 不出来，得靠肉眼扫 DOM 结构才能发现漏网之鱼。
