bootstrap 5.3 是当前稳定且兼容性最优的选择，需避免使用旧版或 latest；container-fluid 必须配合 px-0 防止横向滚动条；sticky-top 要加 transform: translatez(0) 修复 ios 失效；响应式图片须用 srcset + picture；col 内文本需显式设置对齐类。
用 bootstrap@5.3 而不是旧版本，否则 Grid 和 Spacing 工具类行为不一致
Bootstrap 5.3 是当前稳定且对现代浏览器兼容性最稳妥的选择。用 bootstrap@4.6 或更早版本，col-6 在 flex 容器里可能塌陷，mb-4 的间距值也和新版差一档——不是“看起来差不多”，而是真实影响对齐节奏。CDN 直接引入时务必核对版本号：
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
别用 bootstrap@latest，它会悄悄升级到 v6 alpha，导致 navbar-toggler 类失效或 form-control 样式错乱。
落地页核心区块优先用 container-fluid + px-0 控制左右留白
产品页首屏 Banner、全宽 CTA、深色背景 Features 区块，都需要真正“撑满视口宽度”。但默认 container 有左右 padding，container-fluid 又会在小屏上产生横向滚动条——问题出在父级没重置内边距。
- 写法必须是：
<section class="container-fluid px-0"></section> - 别只加
container-fluid就完事，移动端 Safari 下若嵌套了row，外层缺px-0会导致右侧多出 15px 滚动条 -
px-0不影响内部col的 gutter（Bootstrap 5 默认 gutter 是 1.5rem），gutter 由row自带的负 margin 抵消，无需手动干预
sticky-top 导航栏在 iOS 上失效？加 transform: translateZ(0) 强制硬件加速
在 iPhone Safari 中，position: sticky 常常在页面滚动几下后突然“掉下来”，表现为导航栏滚到一半就卡住或消失。这不是 JS 干扰，是 WebKit 渲染层未启用合成层。
修复只需一行 CSS：
.navbar.sticky-top { transform: translateZ(0); }
其他常见无效操作：
- 只加
z-index：没用，z-index 不触发合成 - 用
position: fixed替代：会破坏文档流，导致首屏高度计算错误，CTA 按钮被遮挡 - 在
body上加overflow-x: hidden：治标不治本，且可能禁用横向滑动体验
响应式图片加载用 srcset + picture，别只靠 img-fluid
img-fluid 只负责等比缩放，不解决高分辨率屏加载小图模糊、移动端下载桌面图浪费流量的问题。Landing Page 首屏 Banner 图片体积常超 500KB，必须按设备像素比和视口宽度分发。
正确写法示例：
<picture><source media="(min-width: 992px)" srcset="hero-desktop.webp 2x, hero-desktop@2x.webp 2x"><source media="(max-width: 991px)" srcset="hero-mobile.webp"> @@##@@ </source></source></picture>
关键点：
-
<source></source>必须写在<img src="hero-mobile.webp" class="img-fluid" alt="Product hero">前面，否则 Safari 忽略 - 不要给
<img>加width/height属性，否则破坏img-fluid的 max-width: 100% - WebP 格式必须提供 fallback（如 JPEG），否则老版 Edge 或 Firefox 会显示空白
col 内部的文本组件（比如 h1、p）必须显式加 text-center 或 text-md-start，Bootstrap 不会自动继承容器的对齐方式——这点在手机竖屏转横屏时立刻暴露。
