bootstrap媒体对象本质是css图文混排布局：v3依赖float+clearfix，v4+转向flexbox，v5已移除.media类并推荐工具类替代。
Bootstrap 的媒体对象（media）本质是用 CSS 实现图文混排的轻量布局模式，不是靠 JavaScript 控制，核心依赖的是浮动（v3）或 Flexbox（v4+）。直接写 HTML 加 class 就能生效，但排版效果是否符合预期，取决于你用的是哪个版本、有没有覆盖默认样式、以及是否误用了过时类名。
Bootstrap 3 和 v4+ 的 media 排版机制完全不同
v3 用 float + clearfix 实现左/右对齐，v4 开始全面转向 Flexbox，结构更简洁、嵌套更自然。如果你在项目里混用两种写法，比如给 v4 的 media 加 pull-left，会失效甚至破坏布局。
- v3 必须显式加
pull-left或pull-right才能让图片浮动；media-body需要触发 BFC（常靠overflow: hidden或clearfix）来包裹文字 - v4+ 只需
media+media-body两个 class，图片默认左对齐；用flex-row-reverse可右对齐，order-*可调顺序 - v5 已彻底移除
pull-*类，也不再推荐media-left/media-right—— 这些在 v4 文档里就标为“deprecated”
media-body 为什么经常撑不开？
常见现象：图片显示正常，但右边文字区域窄得只有一行宽，或者完全叠在图片上。根本原因是 media-body 没被识别为 flex item（v4+）或没形成 BFC（v3）。
- v4+ 下，父容器必须有
display: flex—— 而mediaclass 正是干这事的；如果手动写了display: block覆盖它，media-body就变回普通块级元素 - v3 下，
media-body默认是overflow: hidden，靠这个创建 BFC 包裹文字；若被重置成overflow: visible，就会塌陷 - 图片没设宽高（尤其用
holder.js占位时），可能触发怪异渲染；建议加width/height或用object-fit
嵌套媒体对象时，间距和对齐容易失控
嵌套本身没问题，但每层 media 都会继承父级的 flex 属性（v4+）或浮动上下文（v3），导致内层图片错位、文字缩进异常。
- v4+ 推荐用
ms-3（margin-start）替代旧的mr-3，避免 RTL 场景翻车；嵌套时给内层media加mt-2显式控制垂直间距 - v3 嵌套需确保每层都有
clearfix，否则浮动溢出；不要在media-body里再套media而不加clearfix - 所有图片统一加
align-self-start（v4+）或vertical-align: top（v3），避免基线对齐导致顶部留白
真正卡住人的往往不是语法，而是版本迁移时残留的 v3 class（比如 pull-left）和未重置的自定义 CSS。检查浏览器开发者工具里 media 元素的 computed display 和 flex 相关属性，比反复试 class 更快定位问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
