bootstrap响应式服务介绍区核心是合理使用row/col断点组合与高度约束逻辑；需用col-md-4 col-sm-6 col-12替代col-4，配合text-sm/text-md、svg图标、d-flex flex-column、h-100、flex-grow-1及stretched-link解决错位、溢出、触控不足等问题。
Bootstrap 做响应式服务介绍区，核心不是写一堆 @media，而是用对 row 和 col 的断点组合 + 高度约束逻辑。企业级项目里它确实快，但“快”不等于“没坑”，尤其当卡片内容长度差异大、移动端触控区域不足、或团队想局部替换样式时，问题立刻浮出水面。
服务卡片在小屏下挤成一列或文字溢出怎么办
典型现象：PC 上三列正常，手机上三张 col-4 还硬撑着，字号没缩、行高没调、文字直接顶出卡片边界。
- 别用
col-4写死所有断点，改用col-md-4 col-sm-6 col-12—— 小屏自动单列，中屏双列，大屏三列 - 标题和描述文字别靠
font-size硬调，用text-sm/text-md类控制响应式字号缩放 - 图标优先用内联 SVG 或
<i class="bi bi-xxx"></i>，字体图标在 iOS 缩放后容易发虚
卡片高度不一致导致网格错位
这是最常被忽略的视觉断裂点：一张卡片描述两行，另一张只有一行，下一行卡片就从“矮卡”的底部开始排，整行错位。
- 给每个
col加d-flex flex-column - 卡片容器加
h-100，内部card-body也加d-flex flex-column - 描述文字
p.card-text加flex-grow-1，强制撑满剩余空间 - 按钮统一放底部，用
mt-auto推下去，避免浮动错位
移动端点击“了解详情”总点不中
默认 .card 的 padding 是 1rem（约 16px），手指一戳大概率只碰到文字边缘，WCAG 要求最小触控区 ≥ 44×44px。
- 删掉
card-link这类语义化但尺寸不足的类 - 改用
stretched-link：在card-body里放一个@#@#@#@#@#@#@#@#@#@0，整个卡片区域都可点 - 确保
card-body有足够内边距，比如p-4，否则stretched-link会把点击区压缩到文字周围
为什么企业内部工具还选 Bootstrap 而不是 Tailwind 或 Mini.css
不是因为它多先进，而是它在「零定制」前提下，能最快让一个非前端人员写出可用的服务页：container、row、card、modal 全开箱即用，SCSS 可按需导入变量，JS 组件生命周期也能手动控制。
- Tailwind 要写大量 utility class，对没 CSS 工程经验的人反而是认知负担
- Mini.css 没
navbar、没tooltip、没表单验证反馈，企业后台基本功能要自己补全 - Bootstrap 的 IE11 兼容已放弃，但内网 Chrome/Edge 90+ 环境下，
col的 flex 行为稳定，不用额外 polyfill
真正难的不是写出来，是后续维护时发现某张服务卡片要加动画、换图标风格、或对接 Vue 动态数据——这时候才意识到，当初用的 card-title 并不是语义化 class，而是一个强耦合的视觉钩子。
