需用.container-fluid配合响应式显示类（如d-sm-block d-md-none）实现小屏全宽、大屏隐藏，再搭配.container在大屏显示，二者互斥不嵌套；直接给.container加w-100无效，因其max-width由媒体查询硬编码控制。
用 .container-fluid + 断点类组合控制全屏时机
想让容器只在小屏全宽、大屏恢复常规宽度，不能只靠 .container-fluid 一招鲜——它天生就是 100% 宽，没断点逻辑。得配合 Bootstrap 5 的响应式工具类做“条件启用”。
-
.container-fluid本身不带断点，必须外层包裹或用媒体查询包裹它；更稳妥的做法是：在需要响应的容器上直接加container-fluid+ 断点宽度类，比如class="container-fluid d-md-none"表示仅在md（768px）以下生效，md及以上则隐藏该容器 - 若要“小屏全宽、中屏开始限宽”，推荐结构：
<div class="container-fluid d-sm-flex d-md-none">...</div> <div class="container d-none d-md-block">...</div>，用显示/隐藏类切换两套容器 - 别试图给
.container加w-100或mw-100来“模拟全宽”——.container的max-width是媒体查询硬编码的，w-100只会让它撑到那个max-width值，不是视口宽度
.container-fluid 在断点下失效？检查父级是否带 max-width 或 padding
即使写了 container-fluid d-lg-none，小屏下仍没贴边，大概率是父元素悄悄截断了它。
- 常见干扰源：
上有自定义max-width；外层 wrapper div 设了px-3或mx-auto；甚至某些 CMS 模板自动加了container类到<main></main> - 快速验证：打开 DevTools，选中你的
.container-fluid元素，看Computed面板里width是不是100vw，padding-left/padding-right是不是非零值（v5 默认是1.5rem） - 清除左右内边距必须用
px-0，不是p-0（会清上下）、也不是mx-0（那是 margin）；若父级还有 padding，就得一路往上查，直到
全屏容器高度塌缩？min-vh-100 要配对断点使用
宽度随断点切换了，但小屏下容器还是压成一条线——因为 min-vh-100 默认对所有尺寸生效。你得让它也“响应式”。
- Bootstrap 没提供
min-vh-100-sm这种类，所以得手动组合：class="min-vh-100 d-sm-none d-md-block"表示只在md及以上才设最小高度；若只想小屏撑高，就用min-vh-100 d-sm-block d-md-none - 别用
vh-100替代：vh-100是强制等高，在 iOS Safari 地址栏收放时会抖动，且内容超长会被截断；min-vh-100更安全，但必须和显示类同步开关 - 如果容器内嵌了
.row，记得加h-100到.row或其子.col上——否则 flex 子项默认不继承高度，min-vh-100就白设了
模态框、登录页等特殊场景，别混用 .container 和 .container-fluid
比如登录页想小屏全屏、大屏居中，有人会把 .container 包在 .container-fluid 里再加断点类，结果样式打架。
- 正确分层：外层用
container-fluid px-0 d-sm-block d-md-none控制小屏全宽背景，内层用container d-none d-md-block控制大屏居中内容；两者互斥，不嵌套 - 模态框全屏要用
modal-fullscreen-sm-down（加在modal-dialog上），不是改容器类——它内部已处理了定位、z-index、滚动等细节，比手动调container-fluid可靠得多 - 最容易被忽略的是：
.container-fluid在position: fixed或overflow: hidden父容器里会失效；比如侧边栏用了fixed，又把主内容包进container-fluid，那它实际宽度会被父级裁切
container-fluid d-sm-block d-md-none 没反应时，得一层层查父级是否带 max-width、overflow、transform，这些 CSS 属性不会报错，但会静默截断宽度。
