选 container 还是 container-fluid 取决于内容密度：文字为主选 container，全屏 Banner 等选 container-fluid；断点类如 col-md-6 从 768px 起持续生效，需写全 col-12 col-sm-6 col-md-4 避免错位；混用 Flex 工具类时勿对 .row 重复加 d-flex；仅需栅格可引入 bootstrap-grid.css，但无响应式工具类；自定义断点须改 Sass 变量并重新编译。
Bootstrap 5 的 container 和 container-fluid 到底怎么选
不加判断地套用 container 是响应式错位的最常见源头。它默认只在中屏（md）及以上才铺满视口宽度，小屏下两侧留白固定为 1rem，不是“不生效”，而是“按设计故意缩进”。container-fluid 才是真正始终 100% 宽度的容器。
实际选型看内容密度：
- 文字为主、卡片居中、需要呼吸感 → 用
container - 全屏 Banner、地图、数据看板、后台列表页 → 用
container-fluid - 想在小屏撑满、大屏加最大宽度限制 → 自定义类，比如
class="container px-0"配合max-width: 1400px
栅格断点（col-md-6 这类类名）的生效逻辑常被误解
Bootstrap 的断点是“最小宽度触发”，不是“区间匹配”。col-md-6 意味着：从 md（768px）起生效，且**一直生效到更大屏幕**，除非被更高断点覆盖（如 col-lg-4）。
典型翻车现场：
- 写成
<div class="col-sm-12 col-md-6">，结果 iPad 横屏（1024×768）显示为 6 列宽 —— 因为它满足md条件，没写lg覆盖就继续沿用 - 想让手机竖屏单列、横屏双列、平板以上三列，必须写全：
col-12 col-sm-6 col-md-4 - 漏掉
col-前缀（如只写col-md-6）会导致小屏下无宽度定义，元素塌缩成 auto 宽度
Flex 工具类（d-flex、justify-content-center）和栅格混用时的层级陷阱
栅格系统本身基于 Flex 实现，但直接对 .row 加 d-flex 会破坏其内置的负外边距（margin: 0 -15px），导致列溢出父容器。
正确姿势是：
- 居中整行内容？用
<div class="row justify-content-center">，别在外层再包一层d-flex - 想让某列内部内容居中？在该列里加
text-center或d-flex justify-content-center - 需要垂直居中？
align-items-center必须加在.row上，且确保父容器有高度（比如设min-height: 100vh）
自定义断点或禁用响应式时，bootstrap.css 和 bootstrap-grid.css 的区别很关键
如果项目只要栅格，不要组件（按钮、表单、弹窗等），直接引入 bootstrap-grid.css 更轻量。但它**不包含断点工具类**（如 d-md-none、flex-lg-row），这些都在完整版里。
改断点要动 Sass 变量，不是改 CSS 类名：
- 修改
$grid-breakpoints后必须重新编译 CSS，改完只是变量，不生效 - 想彻底关掉响应式？删掉所有带断点后缀的类（
col-md-*），只用col，但它仍依赖display: flex，所以得同时确认浏览器兼容性 - 用 CDN 时无法自定义断点，硬改 class 名（如把
col-md-6改成col-custom-6）不会生效，因为 CSS 规则没对应定义
响应式不是开关，是断点、容器、栅格、工具类四层耦合的结果；漏掉任意一层，视觉就可能突然“卡住”在某个尺寸上。
