卡片内元素横向排布需给.card-body添加d-flex及justify-content-*类；多卡片横向滚动用d-flex+flex-nowrap+overflow-x-auto；响应式横竖切换推荐col-12+col-md-4栅格；Flex失效优先检查computed样式中display和flex属性。
卡片内部元素怎么横向排布
卡片本身没有“横向模式”这个概念，.card 默认是块级容器，所谓“横向”，实际是指 .card-body 里的按钮、标签、图标等子元素并排显示。直接给 .card-body 加 d-flex 就能触发 Flex 布局：
-
d-flex justify-content-between：适合固定数量的两个子项（如“编辑”+“删除”），但子项宽度不一时容易撑开间距 -
d-flex justify-content-start gap-2：更稳妥，gap-2控制间隔，子项自动左对齐，数量动态也不怕 - 别忘了加
flex-wrap: wrap（对应类是flex-wrap）——否则小屏下内容超宽会溢出，而不是换行 - 如果用了
gap但没生效，检查浏览器是否支持（Chrome 84+/Firefox 63+ 没问题，IE 全挂）
多个卡片怎么横向滚动（非折行）
这不是让单张卡片变横，而是让一组 .card 在容器里水平滑动。常见于商品推荐、服务入口列表。关键不是改卡片，而是控制它们的父容器：
- 父容器加
d-flex flex-nowrap overflow-x-auto，确保卡片不换行、可滚动 - 每张卡片加
flex-shrink-0，防止被压缩变形 - 卡片内部仍用
h-100 d-flex flex-column保高度一致，避免滚动时上下跳动 - 移动端慎用：iOS Safari 对
overflow-x-auto的滚动惯性支持弱，手指一抬就停，体验不如原生轮播
多张卡片响应式横向→竖向切换
想在桌面端三列横排、手机端单列竖排？别碰 flex-direction 切换，用 Bootstrap 栅格最稳：
- 外层用
row，卡片用col-12 col-md-4 col-lg-3—— 手机强制单列，768px 起三列，1200px 起四列 - 避免写
col-sm-6 col-lg-3中间跳过md，否则在 992px 宽度（比如部分 Surface 平板）会意外回退到单列 - 卡片内容高度不一致？给
.card-body外包一层h-100 d-flex flex-column，再把价格、按钮用mt-auto推到底部，比设min-height更可靠 - 别用
justify-content: space-between拉卡片间距——列数变化时 margin 计算混乱，直接靠栅格的g-3控制列间隙就行
为什么加了 d-flex 却没效果
Flex 失效不是代码写错，大概率是样式被覆盖或计算值不对。打开 DevTools 看 computed 样式：
- 检查
display是否真为flex：如果有其他 CSS（比如第三方库或自定义 reset）设了display: block !important，d-flex就会被干掉 - 确认父容器没设
overflow: hidden且高度为 0，导致 flex 子项不可见 - 卡片图片没加
img-fluid类？图片撑爆容器后，flex 主轴可能被挤歪，表现像“没生效” - 用的是 Bootstrap 4？
d-flex类名存在，但gap不支持，得用mr-2替代gap-2
实际布局中，“横向”的意图常混着多个层级：卡片内元素排布、卡片组排列方向、响应式断点切换。每个层面该用什么机制，不能全堆 flex 或全靠栅格——得看 DOM 结构深度和浏览器兼容底线。
