根本原因是子列未嵌套在.row中，导致Flex布局失效而退化为块级元素；正确写法必须在子列外包裹.row以激活Flex行为并修正间距。
嵌套时为什么子列不换行、宽度错乱
根本原因：子 .col-* 没被包在 .row 里。bootstrap 的 flex 布局只对 .row 的直接子元素生效，跳过 .row 直接把 .col-4 塞进 .col-8，等于让 flex 容器“看不见”这些列——它们就退化成普通块级元素，各自占满父容器宽度，自然堆成一列、高度不齐。
- 错误写法：
<div class="col-8"> <div class="col-4">A</div> <div class="col-4">B</div> </div> - 正确写法：
<div class="col-8"><div class="row"> <div class="col-4">A</div> <div class="col-4">B</div> </div></div> -
.row必须存在，它提供margin: 0 -15px来抵消子列的padding: 0 15px，缺了就会左右溢出或间距塌陷
子列总宽超 12 会怎样
不会报错，但会强制换行——哪怕你只写了两列 col-8 + col-8（16 > 12），第二列就会掉到下一行，视觉上变成“第一行一个宽栏、第二行一个宽栏”，而不是并排。
- 同一
.row内所有.col-*的数字加起来应 ≤ 12；超过就换行，这是 Bootstrap 的默认 wrap 行为 - 想严格控制不换行？用
flex-nowrap类，但得自己处理溢出或滚动，不推荐用于响应式卡片布局 - 常见误用：在平板尺寸写
col-md-6 col-md-6 col-md-6（18），结果三张卡片横着排不开，第三张掉下来
怎么让嵌套区域里的卡片等高
外层 .row 加 d-flex 不够，因为等高只作用于它的直接子元素；如果子列内部还有标题、内容、按钮等不同高度区块，就得让每一列自己也变成 flex 容器。
- 给子
.row加d-flex和flex-column，再给内部卡片容器加flex-grow-1 - 更稳妥做法：每张卡片外层用
<div class="d-flex flex-column h-100">，内容区加 <code>flex-grow-1，底部固定高度 - 别依赖
align-items-stretch——它只拉伸子项，不解决子项内部内容撑开高度的问题 - 嵌套内层也要写断点：子
.row里的.col-6在手机上可能太挤，应改用col-12 col-sm-6 - 避免混用旧版前缀（如
xs）和新版（sm），v5+ 已弃用xs，只留无前缀版作为最小断点 - 调试技巧：Chrome DevTools 切设备尺寸后，右键检查元素，看 computed 样式里
flex-basis是多少，比肉眼判断更准
移动端优先下，嵌套时断点类怎么叠加才不冲突
断点类是覆盖关系，不是叠加计算。比如 col-12 col-md-6 col-lg-4 表示：手机全宽 → 平板半宽 → 桌面占 1/3；但如果漏写 col-12，只写 col-md-6，那手机上会回退到默认的 col-12（Bootstrap 设计如此），不是消失。
col 就完事，其实中间那个 row 才是真正的开关。
