Bootstrap 5 响应式车型卡片应使用 container+row+col-* 布局，推荐 col-md-4 col-lg-3；图片用 img-fluid、loading="lazy" 和具体 alt；价格配置用 list-group；modal 需设 data-bs-backdrop="static" 并禁用键盘关闭。
用 Bootstrap 5 做响应式车型卡片布局，别碰 float 和旧栅格类
bootstrap 5 已移除 float 布局和 .row-no-gutters，直接用 container + row + col-* 即可。4s 店车型展示最常见的是「三列均等、小屏堆叠」，推荐用 col-md-4 col-lg-3：中屏（≥768px）每行三张，大屏（≥992px）每行四张，小屏自动单列。别手贱加 !important 覆盖 gutter，改间距用 gx-* / gy-* 类更安全，比如 gy-4 gx-lg-3 控制垂直/水平间隙。
车型图必须用 img-fluid，且得加 loading="lazy" 和 alt
4S 店页面通常有 10+ 张高清车型图，不加懒加载会拖慢首屏。Bootstrap 的 img-fluid 保证图片在容器内等比缩放，但仅此不够——必须补上 loading="lazy"（原生支持，无需 JS），否则滚动前图片全预加载。alt 属性不能写「某品牌 SUV」这种模糊描述，要具体，例如 alt="广汽本田型格 Hatchback 2024 智驾版 正面 45° 角"，既利 SEO，也满足无障碍访问要求。别把图塞进 background-image，CSS 背景图无法被爬虫识别，也绕过懒加载。
价格和配置信息用 list-group 而非手写 ul，避免样式错位
用户最关心「起售价」「续航」「百公里加速」这些离散数据，用 Bootstrap 原生 list-group 最省心：<ul class="list-group list-group-flush"></ul> 内嵌 <li class="list-group-item">，自带边框、对齐和 hover 效果。手动写 ul/li 容易漏掉 list-group-flush 导致默认边框残留，或忘记设 padding 导致文字贴边。注意：若需突出某项（如「补贴后售价：¥12.98 万」），给对应 li 加 fw-bold 或 text-success，别用 style="color:red" 硬写。
modal 看实车细节时，务必关掉 backdrop 或设为 "static"
点击车型图弹出大图详情页是标配，但默认 modal 点击背景就关闭，用户可能误触退出。解决方案二选一：data-bs-backdrop="static"（点背景不关，按 Esc 或 × 才关），或 data-bs-backdrop="false"（完全禁用遮罩层）。同时必须加 data-bs-keyboard="false"，防止用户按 Esc 意外退出。别忘了给 modal 内部的 img 加 img-fluid 和 max-height: 80vh（用 style 行内写），否则大图可能撑爆视口。
真正难的不是搭出样子，而是车型数据怎么和 DOM 同步更新——比如筛选「新能源」后，所有卡片要实时过滤，这时别硬写 JS 遍历 display: none，用 classList.toggle 配合 CSS [data-type="ev"] 属性选择器更稳。这个层面已经超出 Bootstrap 范畴了。
