Bootstrap嵌套栅格必须用.row包裹子.col，否则样式失效；.col宽度始终按12列系统计算，与父列占比无关；建议嵌套不超过2层，像素级需求应改用自定义CSS或Grid。
嵌套必须用 .row 包裹，否则样式直接失效
Bootstrap 的嵌套栅格不是“在 .col 里直接写 .col”就能生效的。核心限制是：**任何子级列（.col-*）都必须放在自己的 .row 内部**。这是因为 .row 的 margin: 0 -15px 和 .col 的 padding: 0 15px 是成对设计的——没有外层 .row，负外边距就没了，子列会贴着父列边缘溢出，或者撑破容器。
常见错误现象：
- 卡片或表单控件在嵌套后横向溢出、文字换行异常
- 右侧列莫名右移、左侧留白过大
- 响应式断点失效（比如
.col-md-6在中屏下仍占满整行）
实操建议：
- 每层嵌套前先加一个
<div class="row">，哪怕只放一列 - 避免在
.col里再塞.container——.container有固定内边距和最大宽度，嵌套会导致左右间距叠加错乱 - 检查浏览器开发者工具中，目标
.col是否被.row正确包裹，且无其他 margin/padding 干扰
.col 子列宽度仍按 12 等分计算，不继承父列比例
嵌套时很多人误以为“父列占 8 格，子列的 12 格就该按 8 格等分”，其实不是。Bootstrap 所有 .col-* 类始终基于完整 12 列栅格系统计算宽度，和父级实际占用几格无关。例如：.col-8 内部嵌套一个 .col-6，它仍然占父容器宽度的 50%，而不是 (6/12)×(8/12)≈33%。
这意味着：
- 想在
.col-8里并排放 3 张卡片？用.col-4（3×4=12），不是.col-3 - 右侧
.col-4里放两个等宽区块？用.col-6（2×6=12），不是.col-2 - 如果需要像素级控制（如固定 320px 宽度），不要硬凑
.col，直接加自定义 CSS 或用flex工具类
嵌套层级过深会放大维护成本和兼容风险
Bootstrap 本身不限制嵌套深度，但实践中超过 2 层嵌套（.row → .col → .row → .col → .row → .col）就会明显暴露问题：
- HTML 结构臃肿，可读性下降，后端模板里容易漏掉某层
.row - 移动端小屏幕下，多层 padding/margin 叠加可能导致内容挤压、文字过小
- 旧版 Bootstrap（如 v4）的
flex行为与 v5 有细微差异，嵌套越深，跨版本迁移时越容易出现对齐偏移 - 部分第三方组件（如日期选择器弹层、下拉菜单）在深度嵌套容器中可能因
overflow: hidden或transform上级导致裁剪
建议把嵌套控制在 2 层以内；超过时优先考虑用 CSS Grid 或纯 Flex 布局替代，或拆分为独立组件模块。
栅格嵌套无法解决像素级精度需求
当设计稿要求某个区块必须是 300px 宽、48px 高，或需要非 12 整除比例（如 7:5 宽高比）时，.col-* 类基本无效。因为所有预设类都是基于百分比（如 .col-5 = 41.666667%），且受父容器宽度影响，无法锁定绝对尺寸。
这时更合理的做法是：
- 对关键元素直接写
style="width: 300px"或定义 SCSS 变量 + 自定义 class - 用
flex工具类（如d-flex,flex-shrink-0）配合min-width/max-width - 放弃栅格，改用
grid-template-columns: 300px 1fr这类显式声明 - 注意：混用栅格和自定义尺寸时，务必检查
box-sizing: border-box是否全局生效（Bootstrap 默认已设）
真正容易被忽略的是：嵌套本身不会提升响应能力，它只是复用同一套断点逻辑。如果你的业务需要在 768px 和 769px 之间切一个特殊布局，栅格嵌套帮不上忙，得靠媒体查询或 JS 动态 class 控制。
