怎么用Bootstrap卡片制作横向排列卡片-Bootstrap教程-PHP中文网

Bootstrap 5 卡片横向排列应使用 row+col 栅格系统，禁用 float 或 inline-block；正确结构为 row 容器内嵌 col 类卡片（如 col-md-4），配合 card-body 确保对齐，并依断点选择 col-xl-3（≥1200px 四列）、col-lg-4（≥992px 三列）、col-md-6（≥768px 两列）、col-12（手机单列）。

怎么用bootstrap卡片制作横向排列卡片

Bootstrap 5 卡片横向排列用 `row` + `col` 最稳

直接上结论：别用 float 或 display: inline-block，Bootstrap 5 默认弃用这些老方案。正确姿势是把 card 放进 row 容器，再用 col-* 类控制单张卡片宽度和换行行为。

常见错误是只写

 然后并排堆——没网格系统约束，卡片会塌陷、错位或在小屏下不换行。

row 必须存在，它提供负外边距抵消 col 的 padding，否则左右留白不对称
每张卡片包一层 col，例如 col-md-4 表示中等屏及以上每行 3 张，小屏自动堆叠
卡片内部别漏 card-body，否则 h1/p 等元素的默认 margin 会破坏垂直对齐

响应式断点选哪个？看真实设备宽度而非“几列”
很多人卡在“我要 4 张横排”，就盲目写 col-3，结果手机上看挤成一条缝。Bootstrap 的 col-*-* 是按视口宽度生效，不是固定列数。
推荐组合（基于 Bootstrap 5.3 默认断点）：

桌面大屏（≥1200px）：用 col-xl-3 → 每行 4 张
桌面常规（≥992px）：用 col-lg-4 → 每行 3 张
平板（≥768px）：用 col-md-6 → 每行 2 张
手机（col-12 → 每行 1 张（无需显式写）

实际写法：
...
，类名顺序不影响，但建议从小到大写，可读性高。
卡片高度不一致导致布局错乱？加 h-100 和 d-flex flex-column

文字长度不同、图片有无、按钮有无，都会让卡片高度参差。这时 row 里的 col 会按内容撑开，上下不对齐。
两个关键补丁必须一起用：

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

给最外层 col 加 h-100：确保它占满父容器高度
给 card 加 h-100 d-flex flex-column：让卡片自身拉满，并用 flex 布局约束子元素

card-body 里文字多时，加 flex-grow-1 让它撑开剩余空间，按钮就能稳定贴底

示例结构：

内容


用 card-group？别，它已废弃且不响应式
Bootstrap 4 有 card-group，但 5.x 文档明确标记为 Deprecated。它强制卡片等高、无间距、无法响应式断行，连官方都不维护了。
现在硬套只会遇到这些问题：

加 col 类无效，card-group 内部用 flex，会覆盖网格行为
小屏下仍强行横排，溢出容器
自定义圆角、阴影、边框时样式冲突严重

真要等宽等高，就老实用 row + col + h-100 组合；要卡片紧挨着不留间隙，改 row 的 g-0（即 gap: 0），而不是倒退回去用废功能。
横向排列这事，核心就三点：网格容器不能少、断点按设备设、高度靠 flex 拉齐。其余都是细节微调。