要实现Bootstrap网格无缝平铺，需绕过默认留白逻辑：不用.container/.row，改用无padding/margin的父容器直接嵌套col-*；设h-100确保等高；加gap-0、font-size:0等消除像素缝隙；背景图用100vw+cover防错位。
为什么 container 和 row 会让网格有“缝”
默认 Bootstrap 的 .container 有左右 padding，.row 有负的 margin 抵消它——这是为内容留白设计的，但平铺时反而造成左右空隙和行间错位。真正无缝，得绕过这套留白逻辑。
关键不是删掉 class，而是用更底层的栅格工具：直接用 col- 类配合无 padding/margin 的父容器。
- 避免使用
.container或.container-fluid（它们自带padding） - 不用
.row（它带margin-left: -15px和margin-right: -15px） - 把
col-直接挂到或一个自定义div上，该 div 设margin: 0; padding: 0;
用 col-* + h-100 实现全屏等高平铺
平铺常需每格占满视口高度，但 col- 默认按内容撑高。必须显式设高，并确保父级也无高度限制。
示例结构：
<div class="d-flex flex-column h-100 m-0 p-0"> <div class="col-12 col-md-6 col-lg-4 h-100">区块1</div> <div class="col-12 col-md-6 col-lg-4 h-100">区块2</div> <div class="col-12 col-md-6 col-lg-4 h-100">区块3</div> </div>
-
h-100要求父元素有明确高度，所以外层加d-flex flex-column h-100并确保其父（如）也设了height: 100vh - 若需响应式列数变化，用
col-md-6这类断点类，别只写col-12 - 注意：Bootstrap 5+ 中
col-是 flex 子项，会自动等宽；若需严格等分，确保所有子项使用相同col-*值
消除间隙的三个硬性操作
即使不用 row，仍可能因字体基线、inline 元素空格、或 flex gap 默认值产生像素级缝隙。
- 给父容器加
font-size: 0;，子项再设font-size: 1rem;（消灭 inline 元素间空格） - 用
gap: 0;显式覆盖 flex gap（Bootstrap 5.3+ 默认gap: 0.5rem，必须重置） - 所有子项设
vertical-align: top;（如果用display: inline-block替代 flex，但不推荐）
最稳妥组合：class="d-flex flex-wrap m-0 p-0 gap-0" + 子项 class="col-12 col-sm-6 col-md-4 font-size-inherit"（并手动重置字体大小）。
图片/背景平铺时的常见错位
用 background-image 平铺时，col- 宽度受父容器宽度影响，而父容器若没设 width: 100vw，在滚动条出现时会窄于视口，导致右侧露白。
- 给最外层容器加
style="width: 100vw; margin-left: calc(-50vw + 50%);"可强制横跨整个视口（解决滚动条宽度干扰） - 背景图用
background-size: cover;和background-position: center;防止拉伸变形 - 避免在
col-内嵌套.img-fluid图片做平铺主体——它会按比例缩放，破坏网格对齐；改用background-image或object-fit: cover;的<img alt="怎么用Bootstrap实现无缝网格平铺" >
真正难的不是写几行 class，是意识到 Bootstrap 的栅格本意是“内容容器”，不是“画布”。一旦当成画布用，就得一层层关掉它的默认假设——padding、margin、gap、font-size、甚至 viewport width 计算逻辑。
