Bootstrap 4+ 中 media 类被移除，因布局引擎从 float 切换为 Flexbox；应使用 d-flex、flex-shrink-0、flex-grow-1 等工具类替代，并注意断点控制与 IE11 兼容性。
media 类在 Bootstrap 4 中被完全移除，不是你漏写了 class，而是框架主动删掉了它——底层布局逻辑已由 float 切换为 Flexbox，media 所依赖的 float + clearfix 模式不再兼容新架构。
为什么 media 类在 Bootstrap 4+ 里直接失效
Bootstrap 3 的 media 是一套基于 float: left 和 overflow: hidden 的 hack 组合：左侧图片靠左浮动，右侧内容用 BFC 清除浮动并撑开。这种写法在 Flexbox 成为主流后既冗余又不可靠。
- 浏览器开发者工具里查不到
media相关 CSS 规则——它根本没被编译进 Bootstrap 4+ 的 CSS 文件 - 即使你手动复制 Bootstrap 3 的 CSS 片段，也会和
.row、.col的 flex 布局冲突，导致高度塌陷或错位 - 没有 warning、没有 error，静默不生效，容易误判为 class 拼写错误（比如
media-left写成media-leftt）
用哪些 Flexbox 工具类替代 media
核心思路是：用 d-flex 创建容器，再用 flex-shrink-0 锁定头像/图标宽度，主体内容用 flex-grow-1 自动填充剩余空间。
-
d-flex必须加在父容器上（如<div class="d-flex">），否则所有对齐类都不起作用 -
flex-shrink-0防止头像被压缩（尤其在窄屏下），比固定width更健壮 -
flex-grow-1让文字区域吃掉所有剩余宽度，天然支持响应式折行 - 垂直居中用
align-items-center，它作用于整个容器，不是单个子元素
一个能跑通的最小替换示例
<div class="d-flex align-items-center p-3">
<img src="avatar.jpg" class="flex-shrink-0 rounded me-3" width="64" height="64">
<div class="flex-grow-1">
<h5 class="mb-1">标题</h5>
<p class="mb-0 text-muted">一段描述文字</p>
</div>
</div>
注意：me-3（margin-end）替代了旧版的 media-body 内边距逻辑，且自动适配 RTL；rounded 和 text-muted 这类语义类可照常叠加，不受布局引擎变更影响。
容易被忽略的细节：嵌套与断点控制
Flex 替代方案看似简单，但两个地方极易翻车：
立即学习“前端免费学习笔记（深入）”；
- 如果把上面结构放进
.col-md-8里，而该列本身没设height或min-height，align-items-center仍会失效——因为交叉轴（垂直方向）缺乏参照高度 - 想在小屏竖排、大屏横排？不能只写
d-flex，得用d-md-flex+flex-md-row/flex-sm-column显式控制断点行为，否则移动端会强制横排挤出滚动条 -
flex-grow-1在 IE11 下有兼容问题，若需支持，改用ms-auto（margin-start auto）推挤右侧内容，但仅适用于单行场景
