bootstrap 4 中用 .media 类实现左图右文需确保图片为第一个子元素、文字包在 .media-body 内，禁用额外 wrapper；图片须设 max-width: 100%、height: auto 和 display: block 防止变形与空白；移动端通过 flex-direction: column 和 order 调整顺序，避免 flex 嵌套冲突。
用 .media 类实现左图右文，别套多余 wrapper
Bootstrap 4 的 .media 是专为图文混排设计的语义化组件，它内部已设好 display: flex 和 align-items: flex-start，直接用就能避免浮动塌陷或 flex 换行错乱。关键点是：图片必须是 .media 的**第一个子元素**，文字内容必须包在 .media-body 里——不能额外加 div 或 section 套一层，否则 .media-body 的 flex: 1 会失效，导致文字不占剩余空间。
常见错误现象：.media-body 宽度为 0、文字堆在图片下方、右侧留白过大。
- 图片标签写在
.media内最前，不要用float或position: absolute -
.media-body必须紧随其后，且不能有兄弟元素干扰 flex 流 - 若需图片右对齐，改用
.media-body在前 +.media-right（自定义类），而非反转 DOM
图片尺寸失控？max-width: 100% 和 height: auto 缺一不可
Bootstrap 4 不会给 img 默认加响应式约束，光靠 width: 100% 不够——浏览器仍按原始尺寸参与 flex 计算，尤其当图片宽高比异常时，会撑开容器或拉伸变形。
必须同时设置：
-
max-width: 100%：防止图片超出父容器宽度 -
height: auto：保持原始宽高比，避免压缩或拉伸 -
display: block：消除img默认 inline 带来的底部空白
示例 CSS：
.media img {
max-width: 100%;
height: auto;
display: block;
}
别给 img 设固定 width 或 height（如 width: 200px），这会让响应式失效。
移动端图文顺序翻转，用 order 而非重写 HTML
SEO 和可访问性要求图片在 HTML 中位于文字之前，但小屏常需文字在上、图片在下。Bootstrap 4 本身没提供 order 工具类，得自己加媒体查询控制。
实操要点：
- 桌面端保持
.media默认结构（图左、文右） - 移动端（
@media (max-width: 767.98px)）将.media设为flex-direction: column，再用order调整视觉顺序 -
.media-img设order: 2，.media-body设order: 1，确保文字在上 - 避免用极端
order值（如-999），旧版 Android WebView 可能解析失败
注意：order 只在 display: flex 容器中生效，且父容器必须显式声明 flex-direction。
多卡片列表时，别让 .media 直接嵌套在 .row 里
如果图文模块是一组卡片列表（比如博客摘要），直接把多个 .media 放进 .row .col-* 会导致两层 flex 嵌套冲突：外层 .row 控制列宽，内层 .media 控制图文流，容易出现间隙错位、换行异常或高度不一致。
更稳的做法：
- 用
.list-unstyled包裹所有.media，去掉默认margin和padding - 每个
.media外加一层div，用于控制间距（如mb-4） - 若需等高布局，放弃
.media，改用.card+grid，因为.media本身不支持等高
真正难的不是单个图文对齐，而是当卡片内文字长度差异大、图片尺寸不统一时，如何让整体节奏可控——这时候 .media 的简单性反而成了限制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
