因为 bootstrap 5 的栅格是「移动优先」，col-6 只在超小屏（xs）生效，其他断点无定义，故手机上可能勉强占半宽，但平板及桌面端列宽失控；要全设备占一半，须显式声明各断点如 col-6 col-sm-6 或用 row-cols-2。
为什么直接写 col-6 在手机上不堆叠？
因为 Bootstrap 5 的栅格是「移动优先」，col-6 只在超小屏（col-12 就等于没定义移动端行为，浏览器按默认块级元素渲染，宽度不可控，常表现为挤在一起或错行。
正确做法是显式声明最小断点：col-12 col-sm-6 col-md-4 —— 这样手机下占满整行，平板起两列，桌面起三列。
- 漏掉
col-*类，col-sm-*等中高断点不会自动降级 -
col单独用 = flex: 0 0 auto，宽度由内容撑开，极易错位 - 断点类必须写全，不能只靠
col-md-4期望它在手机上也生效
row 为什么非加不可？
row 不只是语义容器，它带 display: flex 和负外边距（margin-left: -15px），用来抵消子 col 的左右内边距（padding-left: 15px）。没它，col 会退化成普通块元素，垂直堆叠，且间距错乱。
- 把
col直接丢进body或container下，栅格逻辑完全失效 -
row必须包裹所有col，不能只包一部分 - 嵌套
row必须放在col内部，否则负边距会引发水平滚动条
卡片高度不一致导致“楼梯状”布局怎么办？
这是响应式卡片列表最常被忽略的视觉问题：标题长短、图片缺失、描述行数不同，让 card 高度参差，row 里各列上下不对齐。
简单方案：给每个 card 加 h-100，前提是父级 col 有高度上下文（row 默认满足）；更稳方案：在 row 上加 row-cols-1 row-cols-sm-2 row-cols-md-3，这是 BS5 原生等高控制类，自动设 flex 并强制同高。
- 避免用
min-height: 300px这类硬编码值，字体缩放、行高差异会导致截断或留白过大 -
h-100依赖父容器有明确高度，若col外层没设高，可能无效 -
row-cols-*比手动加h-100更可靠，尤其在 Safari 下兼容性更好
页脚多栏为什么小屏下文字挤成一团？
常见错误是把页脚整个塞进 container，结果小屏下栏宽不收缩、文字换行混乱。正确做法是让页脚自己成为栅格容器：用 container-fluid 或直接 row + col，避免嵌套多余 container。
断点选择要贴设备真实宽度：手机（≈375–414px）用 col-12，iPad 横屏（≈768px）用 col-sm-6 更安全，桌面端（≥992px）再升到 col-lg-3 四栏。
- 别给
footer设width或max-width，会破坏断点计算 - 长链接或地址栏单独加
text-wrap，否则小屏溢出 - 版权行必须脱离
row，用mt-auto pt-3粘底，否则会被栅格拉伸变形
row 的必要性和断点类的书写顺序——不是“写了就能响应”，而是“写了且写对才生效”。栅格失效往往不是框架问题，而是结构链断在了第一层。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
