Bootstrap 5用col-12和col-md-6类实现手机一列、大屏两列，需严格遵循container→row→col嵌套结构，配img-fluid和object-fit:cover防错位，并确保viewport标签和grid模块已启用。
用 Bootstrap 5 的栅格系统控制列数
Bootstrap 5 默认用 col-* 类控制不同断点下的列宽，实现“大屏两列、手机一列”不需要写媒体查询，直接靠类名组合就能搞定。关键不是“加响应式”，而是选对断点和列数分配。
-
col-12表示所有屏幕下占满一行（即手机端一列） -
col-md-6表示从md（768px）起每张卡片占一半宽度，自然形成两列 - 如果想在更大屏（如桌面）保持两列、不变成三列或四列，就别加
lg或xl类，避免过度适配
图片卡片结构要套对容器层级
很多人卡片错位或换行异常，不是类写错了，是 HTML 结构没按 Bootstrap 栅格规范来：必须严格遵循 container → row → col → 内容 的嵌套顺序。图片本身建议用 img-fluid 保证缩放不失真。
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
<div class="card">
<img src="..." class="card-img-top img-fluid" alt="...">
<div class="card-body">...</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="card">
<img src="..." class="card-img-top img-fluid" alt="...">
<div class="card-body">...</div>
</div>
</div>
</div>
</div>
避免图片高度不一致导致卡片错位
响应式卡片排版最常踩的坑：图片尺寸各异，card 高度被内容撑开后，同一行两个卡片上下不对齐，视觉上像“掉了一格”。这不是栅格问题，是 CSS 布局塌陷。
- 给
.card加h-100类强制等高（需父容器有明确高度或 flex 布局支持） - 更稳妥的做法是统一图片尺寸，或用
object-fit: cover裁剪：.card-img-top { object-fit: cover; height: 200px; } - 不要依赖
height: auto+ 不同原始图比例，移动端缩放后更容易暴露错位
检查是否启用了 Bootstrap 的响应式工具类
如果你发现 col-md-6 完全没生效，页面始终一列到底，大概率是漏了 viewport meta 标签，或者 Bootstrap CSS 没正确加载——尤其是自定义构建时删掉了 grid 模块。
- 确认 HTML head 中有：
<meta name="viewport" content="width=device-width, initial-scale=1">
- 检查浏览器开发者工具 Elements 面板，看元素上是否有
col-md-6类被应用，以及 computed 样式中flex相关属性是否存在 - Bootstrap 5 默认禁用旧版 IE 支持，如果需要兼容 IE11，得手动开启
grid-legacy并引入额外 CSS
text-truncate 或 h-100 控制溢出——这些细节比列数定义更容易让响应式“看起来没生效”。 
