bootstrap如何设置响应式的价格卡片（Pricing Card）布局-Bootstrap教程-PHP中文网

用 bootstrap 5 的 row 与 col-* 类实现价格卡片响应式布局：xs 单列、sm 单列、md 三列、lg 四列，避免写死列数导致 ipad 竖屏挤列或手机横屏文字过小。

用 bootstrap 5 的 `grid` + `col-*` 实现价格卡片断点适配

bootstrap 本身不提供叫 pricingcard 的组件，所谓“价格卡片”只是语义化布局——核心是用响应式栅格控制列数变化。别套现成的第三方模板，直接用 row 和 col-md-4、col-lg-3 这类类名就能稳稳控制：小屏单列、中屏三列、大屏四列。

常见错误是写死 col-3 或全用 col-sm-6，结果在 iPad 竖屏（768px）下挤成两列但内容撑不开，或者在手机横屏（576px）下还强行两列导致文字过小。

手机（xs，col-12，确保单列且不缩放字体
平板（sm，≥576px）：用 col-sm-6，双列刚好利用横向空间
桌面（md，≥768px）：升为 col-md-4，三列更平衡；若内容精简，可上到 col-lg-3
避免混用 col-* 和 col-xl-* 而跳过 md，否则在 992px 宽度（如部分笔记本）下会意外回退到单列

`card` 内部结构必须用 `flex-column` 防止高度错位

多张卡片并排时，标题、描述、价格、按钮高度不一，纯靠 card 默认的块级流会导致底部对不齐——尤其当某张卡片描述多一行，整行就被它“顶歪”。解决方法不是设固定高（破坏响应性），而是用 Flex 布局拉齐关键区块。

在 card-body 外包一层 flex-column h-100，再把价格、按钮等子元素用 mt-auto 推到底部：

VPS Bootstrap

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

下载

<div class="card h-100">
  <div class="card-body d-flex flex-column h-100">
    <h3 class="card-title">Pro</h3>
    <p class="card-text flex-grow-1">高级功能全开放</p>
    <div class="mb-3">
<span class="h2">$29</span>/月</div>
    <button class="btn btn-primary mt-auto">立即订购</button>
  </div>
</div>

flex-column 让子元素垂直堆叠，h-100 保证占满父容器高度
flex-grow-1 给描述区域“弹性占位”，自动撑开剩余空间
mt-auto 把按钮吸到底部，不受上面内容行数影响
千万别给 card 设 min-height，那会在小屏下留大片空白

价格数字和单位必须拆开控制字体大小与行高

像 $99/month 这种组合，直接写进一个 h2 里，缩放时美元符号和数字会糊在一起，或斜杠被挤换行。正确做法是把金额、单位、周期分三段，用不同类名独立控制。

主金额用 <span class="display-6">$49</span>（比 h2 更专注数字显示）
单位（如 /mo）用 <small class="text-muted">/mo</small>，字号小、颜色浅，视觉上不抢主金额
周期说明（如 “ billed annually”）单独成行，加 mt-n2 微调位置，避免和单位粘连
所有金额相关文字禁用 text-center，改用 text-md-start，否则在 col-sm-6 下左右卡片文字会因字数差异错位

悬停动效要限制作用域，避免触发重排

加个 hover-scale 看起来很酷，但 Bootstrap 默认没提供，手写 :hover { transform: scale(1.02) } 会触发整张卡片重排，尤其在 Safari 上容易卡顿。真要加，必须满足两个条件：只对 transform 和 opacity 动画，且卡片容器设 will-change: transform。

写法示例：.card:hover { transform: translateY(-4px); transition: transform .2s ease; }
必须加 .card { will-change: transform; }，否则 Chrome 可能跳帧
禁用 height、margin、padding 的 hover 变化，这些会强制重排布局
如果卡片里有 SVG 图标，确保其 width 和 height 是固定值，否则缩放时图标边缘会模糊