Bootstrap flex工具类是CSS Flexbox的快捷封装，需注意容器尺寸、对齐组合、响应式断点匹配及嵌套深度；Grid系统依赖row包裹col，非原生CSS Grid；复杂布局或精确控制时应直接写原生CSS。
用 Bootstrap 的 flex 工具类快速对齐和排列元素
Bootstrap 的 flex 工具类不是替代 CSS Flexbox，而是封装了常用 display: flex、justify-content、align-items 等声明，适合快速调试布局方向与对齐方式。
常见错误是直接套用 d-flex 却忽略容器尺寸——Flex 容器默认不设高宽，子元素若无内容或未设 min-height，可能“看不见”。
-
d-flex必须配合父容器存在（比如<div class="d-flex">），且该容器需有明确的宽度或内容撑开 - 水平居中用
justify-content-center，垂直居中需同时加align-items-center，二者缺一不可 - 响应式变体如
flex-md-row、justify-content-lg-between要注意断点匹配：md 对应 ≥768px，lg ≥992px - 避免嵌套过深：三层以上
d-flex套用容易导致对齐逻辑混乱，建议拆成独立组件或改用 Grid
用 Bootstrap 5+ 的 grid 系统做响应式栅格布局
Bootstrap Grid 是基于 CSS Grid 的封装（v5.3+ 支持 grid 类），但多数项目仍用传统 12 列 row/col 模式。它本质是浮动 + margin 调整，不是原生 Grid Layout，所以不能直接写 grid-template-areas。
典型误用是把 col 直接放在 body 下——必须包裹在 row 内，否则 gutter（列间距）不生效，且 col 的百分比宽度计算会出错。
立即学习“前端免费学习笔记（深入）”；
- 基础结构必须是：
<div class="row"><div class="col-6">...</div></div> -
col类不设宽度时（如仅写col），会均分剩余空间；写col-6表示占 6/12 = 50% 宽度 - 响应式列宽如
col-sm-12 col-md-6表示：小屏全宽，中屏半宽；注意 sm 断点（≥576px）比 md 小，顺序不能颠倒 - 如果需要复杂区域划分（比如侧边栏+主内容+广告位），别硬凑
col，改用原生display: grid配合grid-template-columns
什么时候该放弃 Bootstrap 工具类，直接写原生 CSS
当出现以下情况时，Bootstrap 的工具类反而拖慢开发节奏：
- 需要精确控制
gap值（如gap: 1.75rem），而 Bootstrap 只提供g-3（=1rem）、g-4（=1.5rem）等离散值 - 要实现圣杯布局、粘性页脚、等高列，Bootstrap 的
flex或grid类无法覆盖所有场景 - 项目已用 Tailwind 或自定义 PostCSS 工具链，再引入 Bootstrap 的工具类会造成类名冲突和体积冗余
- 动画触发布局重排（如
transform+flex同时用），Bootstrap 类缺乏 will-change 控制，易卡顿
此时直接写：
.layout-main {
display: grid;
grid-template-columns: 250px 1fr;
gap: 1.75rem;
}兼容性与性能要注意的细节
Bootstrap 5 默认不支持 IE11，其 flex 工具类在 Safari 13.1 以下有 align-items: stretch 渲染差异；grid 类在旧版 Android WebView 中可能完全失效。
- 若需兼容 iOS 12/Safari 12，避免用
flex-fill，改用flex: 1手动写 - 大量使用
col-*类会增加 HTML 体积，服务端渲染时注意 SSR 工具是否压缩类名（如 PurgeCSS 需显式保留col-正则） - 动态切换断点类（如 JS 控制
col-md-4→col-lg-3）会导致 layout thrashing，优先用 CSS 媒体查询控制
工具类是拐杖，不是骨架。越早看清哪些布局必须靠原生 CSS 定制，后续维护成本越低。
