Bootstrap中Card图片左右布局需放弃card-img类，改用栅格系统：小屏col-12堆叠实现上图下文，大屏（lg）通过col-lg-4与col-lg-8配合实现左图右文，并用g-0、object-fit:cover、aspect-ratio等确保图片一致性和无间隙。
Card图片左右布局在不同断点如何切换
Bootstrap默认的card结构是垂直流：图片在上、内容在下，无论屏幕大小。要实现“大屏图片左、文字右；小屏图片上、文字下”，不能靠card-img-top或card-img-left（后者根本不存在），得手动拆解结构并用栅格+可见性工具控制。
用Bootstrap栅格替代默认card-img布局
核心思路是放弃card-img类，把图片和内容分别放进col里，用row包裹。这样能精准控制位置和堆叠行为：
- 大屏（
lg及以上）：用col-lg-4 col-lg-order-1放图片，col-lg-8 col-lg-order-2放文字，实现左图右文 - 小屏（
md及以下）：默认col-12堆叠，图片自然在上、文字在下 - 注意图片需设
width: 100%且height: auto，否则在col中可能拉伸变形
示例结构：
<div class="card">
<div class="row g-0">
<div class="col-md-12 col-lg-4">
<img src="..." class="w-100 h-auto" alt="...">
</div>
<div class="col-md-12 col-lg-8">
<div class="card-body">
<h5 class="card-title">标题</h5>
<p class="card-text">正文</p>
</div>
</div>
</div>
</div>
为什么不用float或flex-direction反转
有人试过给card加flex-row再用flex-lg-row-reverse，但容易出问题：
-
card本身不是flex容器，默认display: block，直接加flex-row会破坏内边距和阴影等样式 -
flex-direction: row-reverse在小屏仍生效，除非配合d-lg-flex和d-md-block，但写法冗长且易漏断点 - 栅格方案更稳定——
col天然响应式，语义清晰，兼容Bootstrap 5.2+所有版本
图片高度不一致导致卡片错位怎么办
多个卡片并排时，左边图片高度不同会让右边文字顶部不对齐。这不是布局问题，而是视觉对齐需求：
- 给图片容器（如
col-lg-4）加min-height或height固定值，但牺牲响应性 - 更推荐用
object-fit: cover+ 固定aspect-ratio（如aspect-ratio: 4/3），配合overflow: hidden - 如果必须保持原始比例，就用
align-items: flex-start在row上，避免align-items: stretch（默认）拉伸文字区
关键CSS补充：
.card .row {
align-items: flex-start;
}
.card img {
object-fit: cover;
aspect-ratio: 4/3;
width: 100%;
}
这种组合在真实项目里反复验证过，比依赖card-img-overlay或自定义position: absolute更可控。最常被忽略的是g-0（移除栅格间隙）和h-auto——少了它们，图片边缘会留白或截断。
