苹果官网排版不用Bootstrap，而是用原生CSS：max-width+clamp()动态缩放容器、clamp()控制字体、gap+aspect-ratio实现响应式间距与图片比例，强调语义、克制与像素级校准。
苹果官网的排版不是靠 Bootstrap 实现的——强行用 Bootstrap 模拟反而会增加冗余、破坏语义、难以响应式微调。真正接近它的做法，是绕开 Bootstrap 的栅格和组件，用原生 CSS 控制流、间距、字体缩放和视口单位。
为什么 container 和 row/col 会破坏苹果式留白节奏
苹果官网几乎不用固定宽度容器，而是依赖 max-width + margin-inline: auto + 视口单位（如 clamp()）动态缩放内容区。Bootstrap 的 .container 默认设死宽度（1140px 等），且内部 .row 强制负边距，导致外边距无法自然呼吸。
- 删掉所有
.container、.row、.col类，改用自定义类如.hero-section、.feature-grid - 用
margin-inline: auto替代margin: 0 auto，兼容 RTL 布局 - 关键宽度用
max-width: clamp(320px, 90vw, 1200px)，而非 Bootstrap 的断点固定值
font-size 必须用 clamp() 而非 rem 或媒体查询
苹果的字号随视口平滑缩放，不是断点跳变。Bootstrap 的 font-size-root 基于 px 或固定 rem，缺乏弹性。
- 标题统一用
font-size: clamp(1.5rem, 4.5vw, 3.5rem)，小屏保可读性，大屏保视觉冲击 - 正文字号用
font-size: clamp(0.875rem, 1.2vw, 1rem)，避免小屏过小、大屏过大 - 禁用 Bootstrap 的
fs-*工具类，它们无法响应式缩放
如何用 gap 和 aspect-ratio 替代 Bootstrap 的 g-* 和图片 hack
苹果的卡片/图文模块间距均匀、比例精准，Bootstrap 的 g-3 等仅控制 gap 像素值，无法适配不同设备密度；图片常靠 object-fit + 固定宽高比撑满，而苹果用 aspect-ratio 原生维持比例。
立即学习“前端免费学习笔记（深入）”；
- 网格用
display: grid; gap: clamp(1rem, 3vw, 2rem)，gap 随视口变化 - 图片容器加
aspect-ratio: 16/9，再配img { width: 100%; height: 100%; object-fit: cover; } - 删掉
.img-fluid—— 它只做max-width: 100%，不保比例，也不缩放
真正的难点不在写多少 CSS，而在放弃 Bootstrap 提供的“安全感”：它强迫你接受一套预设节奏。苹果风格的本质是克制——少用 class，多用逻辑（clamp、aspect-ratio、margin-inline），以及对每一处 gap 和 line-height 的手动校准。一旦开始依赖工具类，就很难再退回去调一个像素的呼吸感。
