Bootstrap 5服务卡片自适应排列应使用row+col栅格系统，通过col无断点前缀或col-md-4等实现响应式换行，配合h-100、d-flex、flex-column和flex-grow-1解决高度不一致问题，并用stretched-link提升移动端触控体验。
用 Bootstrap 5 的 row + col 实现服务卡片自适应排列
bootstrap 响应式服务布局的核心不是靠 js 或媒体查询手写，而是靠栅格系统天然的断点行为。关键在于别把卡片塞进固定宽度容器，也别用 float 或 display: inline-block 模拟。
常见错误是写成：<div class="col-4"></div><div class="col-4"></div><div class="col-4"></div>，在小屏下强行三列挤在一起导致文字溢出或卡片高度塌陷。
- 正确做法：用
col不带断点前缀（即col），让其在所有断点下等宽自动换行；或按需指定col-md-4、col-sm-6等 - 卡片内容用
h5+p结构，避免用font-size硬调，靠text-sm/text-md类控制小屏字号 - 图标建议用 SVG 内联或 Bootstrap Icons 的
<i class="bi bi-lightning-charge"></i>，避免字体图标在缩放时模糊
服务卡片高度不一致导致网格错位怎么办
这是最常被忽略的视觉问题：当某张卡片标题长两行、另一张只有一行时，col 容器高度不同，下一行卡片会“卡位”错开，破坏对齐感。
根本原因不是 Bootstrap 有问题，而是默认 flex-wrap 下 flex item 不强制等高。解决方案不是 JS 计算，而是 CSS 层面约束：
- 给
.row加class="row g-4"（确保间距统一），再加style="display: flex; flex-wrap: wrap;"—— 其实 Bootstrap 5 默认就是，不用额外写 - 给每个
.col加class="d-flex flex-column"，再给卡片内容区（如<div class="card h-100">）加h-100 - 卡片内部用
flex-grow-1推动描述文字撑满剩余空间，避免底部按钮浮动错位
示例结构：
<div class="col">
<div class="card h-100 d-flex flex-column">
<div class="card-body d-flex flex-column">
<h5 class="card-title">云备份</h5>
<p class="card-text flex-grow-1">自动同步，多端实时更新</p>
<a href="#" class="btn btn-primary mt-auto">了解详情</a>
</div>
</div>
</div>
移动端点击区域太小，服务项难触达
PC 上 hover 能看图标+标题，但手机上用户手指一戳可能只点中文字边缘，触发失败。这不是交互逻辑问题，是物理尺寸没达标。
WCAG 要求最小可触控区域 ≥ 44×44px，而默认 .card 的 padding 是 1rem（约 16px），明显不够：
- 给整个卡片加
class="text-decoration-none"和包裹链接，而不是只给按钮加<a> - 卡片外层
<div class="col">不要直接设cursor: pointer，而是用<a href="#" class="stretched-link">（Bootstrap 5 内置）填满父容器 - 如果必须用按钮，把
btn改为btn-lg并加py-3 px-4手动扩大内边距
IE11 兼容性要不要考虑
如果你的客户还在用 IE11，那 col 的 flex 行为会失效，卡片全堆成一列。但 Bootstrap 5 官方已放弃 IE11 支持，连 float 栅格都删了。
真要兼容，只有两个选择：
- 降级用 Bootstrap 4.6，它保留了
col-*的 float 实现，且支持 IE10+ - 不升级 Bootstrap，改用纯 CSS Grid +
@supports (display: grid)回退到 flex，但维护成本陡增
绝大多数企业级后台和新项目，现在可以安全忽略 IE11 —— 它在 2022 年 6 月已终止支持，Windows 10/11 默认不装。
真正容易被忽略的是：服务卡片里的 SVG 图标如果用了 viewBox 但没设 width/height，在某些旧安卓 WebView 里会渲染异常。加个 style="width: 2rem; height: 2rem;" 最省心。
