col-sm-6 和 col-md-6 在视口宽度 ≥768px 时表现相同；但若仅写 col-md-6，手机端（
用 Bootstrap 网格系统前必须确认的三件事
Bootstrap 的 container、row、col 不是套上就自动响应式，漏掉任意一个基础约束都会让布局在小屏错乱或塌陷。
-
container或container-fluid必须作为最外层包裹，否则col的百分比宽度会脱离上下文基准 - 所有
col必须直接放在row内，不能嵌套在其他 div 里——否则row的负 margin 无法抵消col的 padding - 别手动写
width: 50%或flex: 1覆盖col-*类，Bootstrap 的断点类（如col-md-6）依赖 CSS 层叠顺序和媒体查询优先级
col-sm-6 和 col-md-6 在什么情况下表现一样？
当视口宽度 ≥768px 时，col-sm-6 和 col-md-6 都生效且效果相同；但关键差异在更小尺寸：若只写 col-md-6，在手机（col-12），而 col-sm-6 从 ≥576px 就开始生效，576px–767px 区间内仍保持半宽。
实际建议：优先用最小必要断点。比如内容在手机上也需并排，就用 col-6；若仅在平板及以上并排，用 col-sm-6 更稳妥，避免在超小屏（如 iPhone SE）上意外换行。
为什么加了 col-lg-4 还是没三栏？
常见原因不是类名写错，而是父级 row 没撑开高度，或兄弟元素存在浮动/绝对定位干扰了 flex 布局流。Bootstrap 5+ 的网格基于 Flexbox，row 默认是 display: flex，但一旦其父容器有 overflow: hidden 或子元素用了 position: absolute，就可能破坏 flex item 的计算。
立即学习“前端免费学习笔记（深入）”；
快速验证方式：
.row {
outline: 1px solid red; /* 看是否渲染出整行 */
}
.col-lg-4 {
outline: 1px solid blue; /* 看每个列是否被正确识别 */
}
如果 col 的 outline 显示错位或重叠，大概率是外层 HTML 结构不规范，比如漏了 row，或把 col 放在了 container 外面。
不用完整 Bootstrap，只引入网格 CSS 怎么做？
Bootstrap 官方提供「CSS only」版本，但默认仍包含所有组件样式。若只要网格，可从源码中提取核心部分，或改用轻量替代方案：
- 直接引用 Bootstrap 官网 CDN 的 CSS，并删掉 JS 文件链接（网格纯 CSS 实现，无需 JS）
- 用 Bootstrap Sass mixins 单独编译
grid.scss，剔除forms、buttons等无关模块 - 更激进的做法：复制其网格逻辑手写——核心就三条：
row设margin: 0 -15px，col设padding: 0 15px，各断点用flex: 0 0 X%+ 媒体查询
真要极简，下面这段代码就能跑通基础 12 栅格（不含断点）：
:root {
--grid-gutter-width: 1.5rem;
}
.row {
display: flex;
flex-wrap: wrap;
margin: 0 calc(-1 * var(--grid-gutter-width) / 2);
}
.col-12 { flex: 0 0 100%; max-width: 100%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-4 { flex: 0 0 33.333%; max-width: 33.333%; }
[class^="col-"] {
padding: 0 calc(var(--grid-gutter-width) / 2);
}
断点扩展需要补媒体查询，但结构逻辑和 Bootstrap 一致——理解这个，才能真正控制响应行为，而不是靠反复试错加类名。