Bootstrap怎么实现卡片内图片的横向布局-Bootstrap教程-PHP中文网

卡片内图片横向排列应使用 .row + .col 栅格系统，而非 .card-img 类；需配合 .img-fluid、响应式断点（如 .col-12 .col-sm-6 .col-md-4）、.g-2 间距及避免嵌套 flex 干扰。

卡片内图片横向排列用 `.row` + `.col` 就够了，别套 `.card-img`

bootstrap 的 .card 默认是垂直流式布局，直接把多张图片塞进 .card-body 会堆成一列。想横排，核心不是改图片样式，而是用栅格系统控制容器——.row 提供水平 flex 容器，.col 控制每张图占几列。

常见错误是给加 .card-img-top 或 .card-img，这些类专为单张封面图设计，自带块级、宽高约束，强行加多张会错位或溢出。

把图片统一放在 内，每个包在或指定列宽（如 .col-4）里
图片建议加 .img-fluid，避免拉伸变形；不需要 .rounded 等修饰类，除非设计需要


如果图片高度不一致，加 .align-items-center 到 .row 上可垂直居中对齐
响应式断点怎么设：用 .col-sm-6 而不是 .col-6

移动端窄屏下横排三张图会挤爆，必须按屏幕宽度分层控制列数。Bootstrap 的断点前缀（sm、md、lg）就是干这个的。
.col-6 是“所有尺寸下占一半”，而 .col-sm-6 表示“≥576px 才占一半，更小屏幕自动堆叠成一列”。实际项目中几乎不用纯 .col-* ，否则在手机上图片会过窄或文字换行异常。

常用组合：.col-12 .col-sm-6 .col-md-4 → 手机 1 列、平板 2 列、桌面 3 列
如果图片内容重要（比如商品图），建议最小断点设为 md，避免小屏下图太小看不清
注意 .row 默认有负 margin，必须包裹在 .card-body 或 .p-0 容器里，否则左右留白不一致

图片间距靠 .g-2 不要手写 margin

很多人习惯给每个 .col 加 margin-right，结果在最后一列或多列换行时出现多余空隙。Bootstrap 5+ 的 .g-* （gap）类才是正确解法——它作用于 .row，均匀分配子项间距，且自动处理换行间隙。

											
												
												
													VPS Bootstrap
													从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。
												
												下载
												
											
										

推荐用 .g-2（0.5rem）、.g-3（1rem），数值越大间隙越宽

.g-0 可彻底取消间隙，适合拼接型图集
避免混用 .mx-2 这类边距类，它们和 .g-* 冲突，导致实际间距翻倍

Flex 对齐失效？检查 .row 是否被 .d-flex 干扰
如果加了 .justify-content-center 没反应，大概率是父容器（比如 .card-body）本身用了 .d-flex，导致 .row 的 flex 属性被覆盖。Bootstrap 的 .row 本质是 display: flex，但嵌套 flex 容器时，子项的对齐行为受上级影响极大。

最简排查：临时删掉 .card-body 上的所有 .d- 类，看 .row 对齐是否恢复
稳妥做法：把图片区域单独抽成一个 ...

不要在 .row 上同时用 .text-center 和 .justify-content-center，前者作用于行内元素，后者作用于 flex 子项，目标不同

横向布局的关键不在图片本身，而在容器层级和栅格语义是否干净——只要 .row 是直接子容器、没被其他 flex 层级干扰、断点设置合理，就基本不会出问题。真正容易被忽略的是 .g-* 的存在感太低，很多人根本没想到 gap 还能这么用。