列偏移与嵌套
偏移用 offset-{断点}-{列数}，让列向右空出 N 份，最经典的应用是「不居中的限宽列」：col-md-6 offset-md-3 让 6 列宽的表单在桌面端左右各空 3 列，视觉居中。与 text-center 类型的内容居中不同，offset 是列本身的位置调整。
嵌套指在 col 内部再放 row。这是搭建复杂布局的关键：外层 col 划分大区域（主内容 + 侧边栏），内层 row 再把主内容细分为若干子块。内层的 col 的「12 等份」是相对父级 col 的宽度重新计算的。
实战建议：嵌套不要太深（两层以内为宜），层级越深越难调试；能用 g-* 控制嵌套后的间距，就别手动加 margin。另外记住换行技巧：在 row 里插入 w-100 元素可以强制后续列换行。
本节要点offset-N 向右空 N 列，col-md-6 offset-md-3 实现桌面居中表单；col 内可再嵌 row，等份相对父级重新计算。
代码
<div class="container">
<!-- 偏移：md 及以上向右空 3 列 → 6 列表单居中 -->
<div class="row">
<div class="col-md-6 offset-md-3">
<form>居中的登录表单</form>
</div>
</div>
<!-- 嵌套：col 里再放 row -->
<div class="row g-3">
<div class="col-md-8"> <!-- 主区域 -->
主内容区
<div class="row g-2"> <!-- 内层重新分 12 份 -->
<div class="col-6">子块 A</div>
<div class="col-6">子块 B</div>
</div>
</div>
<div class="col-md-4"> <!-- 侧边栏 -->
侧边栏
</div>
</div>
<!-- 强制换行：插入 w-100 -->
<div class="row">
<div class="col-4">1</div>
<div class="w-100"></div> <!-- 换行 -->
<div class="col-4">2</div>
</div>
</div>📚 推荐阅读
来自万象云档的免费在线书籍，点击封面直接阅读