Bootstrap如何让Container全屏铺满-Bootstrap教程-PHP中文网

应使用.container-fluid配合响应式内边距类（如px-sm-3 px-xl-0），因其无max-width限制、天然撑满视口，再通过断点控制padding实现小屏留白、大屏贴边。

bootstrap如何让container全屏铺满

直接用 `.container-fluid`，别碰 `.container`

想让容器真正铺满视口宽度（100vw），.container 从设计上就做不到——它带 max-width 媒体查询（比如 xl 下是 1140px）和 margin: 0 auto，本质是“居中限宽”，不是“全屏”。硬加 w-100 或 mx-0 只会让它卡在那个 max-width 值里，左右还是留白。

正确起点只有一个：.container-fluid。它默认就是 width: 100%（实际计算为 100vw），无 max-width，无自动居中，天然贴边。

适用场景：顶部导航、全宽轮播、背景色区块、登录页外层容器
注意：它只管宽度，高度仍为空，必须额外控制（比如加 min-vh-100）
常见错误：把 .container-fluid 套在已有 .container 里面——父级的 max-width 和 padding 会立刻把它截断

`.container-fluid` 为什么看起来没贴边？查父级和内边距

写了 .container-fluid 却仍有左右空白，90% 是被父元素悄悄限制了。Bootstrap v5 默认给 .container-fluid 设了 padding-left: 1.5rem 和 padding-right: 1.5rem（即 px-3），这不是 bug，是设计默认值。

清除它必须用 px-0（不是 p-0，那会清上下；也不是 mx-0，那是 margin）。

快速验证：DevTools 里选中元素 → Computed → 看 width 是不是 100vw，padding-left/padding-right 是不是 0px
常见干扰源：被 CMS 或自定义 CSS 加了 max-width 或 padding；外层 wrapper div 带了 px-3 或 mx-auto
安全写法：<div class="container-fluid px-0"> —— <code>px-0 作用于所有断点，包括 xs
小屏留白、大屏铺满？用响应式 px-* 类组合

如果目标是“小屏有左右留白、大屏真正贴边”，不能靠改 .container 的 margin（会破坏居中逻辑），而要用 .container-fluid + 断点内边距控制。

VPS Bootstrap
从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

关键点：px-sm-3 在 xs（px-2 才覆盖 xs；高断点类会覆盖低断点类，但 xs 没对应类就按默认走。
- 覆盖全部小屏（xs–md）+ 大屏清零：px-2 px-sm-3 px-md-4 px-xl-0
- 更简洁常用写法：px-sm-3 px-xl-0（xs 无 padding，若需 xs 也留白，必须补 px-2）
- 别用外层 wrapper 套 .container 模拟：“<div class="mx-sm-3 mx-xl-0"><div class="container">” 会导致 <code>.container 自身宽度被 max-width 截断，右侧永远留白
  高度也要“全屏”？min-vh-100 别直接加在 .container 上
  
  只设宽度为 100vw，高度塌缩成一条线，根本看不出“全屏”。但直接给 .container 加 min-vh-100 或 h-100 很可能无效——因为 .container 不继承父高，且其父级（比如 <main></main> 或 <section></section>）往往没设高度行为。
  
  正确做法是把 min-vh-100 加在 .container-fluid 的父级或同级区块上，例如背景容器：
```
<section class="min-vh-100 bg-dark"><div class="container-fluid px-0">
    <div class="container">内容居中</div>
  </div>
</section>
```
  - 有固定 header/footer 时，必须用 flex：，再把 .container-fluid 放进 <main class="flex-grow-1"></main>
  - 避免用 vh-100：iOS Safari 地址栏收放时高度抖动，且内容超长会被截断
  - 如果容器内用了 .row，记得加 h-100 到 .row 或其子 .col，否则 flex 高度不传递
  真正难的不是加哪个类，而是意识到：全屏宽度和全屏高度是两个独立问题，各自有干扰链；.container 和 .container-fluid 是语义不同的容器，混用必出视觉错位；而所有“看起来没生效”的情况，几乎都卡在某一层看不见的 padding、max-width 或高度继承断点上。