Bootstrap 5 卡片默认不支持图片左文字右布局，需手动调整DOM结构并用flex或grid实现：推荐将img与card-body并列置于card内，加d-flex flex-row类；或用自定义grid控制宽比；禁用float/absolute等破坏文档流的方式。
Bootstrap 5 卡片默认不支持图片左文字右，得手动改结构
bootstrap 的 card 组件默认是「图片在上、内容在下」的垂直流布局。想让图片靠左、文字靠右，不能只靠 card-img-left 这类类名（它根本不存在），必须打破默认 dom 顺序，用 css 控制流向或重排元素。
用 flex-row + card-body 内部调整最稳妥
这是兼容性好、语义清晰、不用脱离文档流的做法。关键不是给整个 card 加 flex-row，而是把 card-body 和图片并列放在 card 内，并用 d-flex flex-row 包裹它们：
<div class="card d-flex flex-row">
<img src="avatar.jpg" class="card-img" style="width: 120px;">
<div class="card-body">
<h5 class="card-title">张三</h5>
<p class="card-text">前端工程师，专注组件设计</p>
</div>
</div>
-
card-img不加card-img-top—— 后者会触发绝对定位，破坏 flex 布局 - 图片需设固定宽高（如
style="width: 120px;"），否则 flex 容器里可能塌缩 - 别给
card-body加ms-auto或me-3这类间距类——flex 默认有间隙，额外加容易错位 - Bootstrap 5.3+ 支持
card-img-start，但仅限于card-horizontal，而后者要求图片和 body 都是子元素且顺序固定，实际不如手写 flex 灵活
用 grid 布局替代 flex 更易控宽比
如果需要严格控制图片占 30%、文字占 70%，grid 比 flex 更直接，也避免 flex 下图片拉伸变形问题：
<div class="card d-grid grid-cols-2">
<img src="avatar.jpg" class="card-img" style="width: 100%;">
<div class="card-body">
<h5 class="card-title">李四</h5>
<p class="card-text">后端开发，熟悉 Go 与 PostgreSQL</p>
</div>
</div>
- 必须配合自定义 CSS：
.grid-cols-2 { display: grid; grid-template-columns: 1fr 2fr; }（Bootstrap 本身不提供该类） - 图片设
width: 100%才能填满格子；若用max-width，可能留白 - IE 不支持
grid，如果还要兼容 IE11，这条路直接放弃 - 文字区域高度不一致时，两列底部不会自动对齐——flex 表现更稳定
千万别用 float 或 position: absolute
老式写法看着快，但会引发一堆隐性问题：
-
float: left后，card-body需要overflow: hidden清浮动，否则父容器高度塌陷，卡片边框断掉 -
position: absolute让图片脱离文档流，card高度变成 0，外部 margin/padding 全失效 - 响应式断点（如
md下想变回上下布局）时，absolute元素不会随屏幕缩放重排，必须写 JS 监听 resize，得不偿失 - 所有这些方案都会让
card-title和card-text的语义层级混乱，影响可访问性（screen reader 可能跳过图片或读错顺序）
