Bootstrap栅格系统本质是基于12列的百分比计算，如.col-md-4对应flex: 0 0 33.333333%，由$grid-columns: 12和断点变量共同决定，依赖.row的display: flex及严格DOM结构，非魔法class而是显式工程化实现。
因为 Bootstrap 的 CSS 源码不是一堆“魔法 class”，而是把响应式布局的数学约束、浏览器渲染边界、DOM 结构依赖全部显式写出来了——你看懂它，就等于拿到了前端布局的“标准答案草稿”。
栅格系统本质是百分比计算，不是 class 命名游戏
很多人以为 .col-md-4 是“固定占 4 列”，其实它背后是 flex: 0 0 33.333333%（Bootstrap 5 使用 Flexbox）。这个值不是拍脑袋定的，而是由 12 列总宽 ÷ 4 得出的精确小数。你改一个断点（比如从 md 换成 lg），实际生效的是另一组媒体查询 + 另一套 flex-basis 计算。
- 错误现象：
.col-sm-6 .col-md-4在中屏上没对齐？很可能是父级.row没加display: flex，或容器没套.container导致宽度不匹配 - 关键参数：
$grid-columns: 12（Sass 变量）决定所有列宽基数；$grid-breakpoints控制各断点起始宽度 - 性能影响：每多一个
.col-*类，CSS 引擎就要多解析一次 flex 属性，但比手写媒体查询快得多——因为它复用了同一套计算逻辑
组件样式强依赖 DOM 结构，不是“贴 class 就能用”
.navbar 不是单个 class，而是一整套嵌套规则：.navbar > .container、.navbar-nav > .nav-item > .nav-link。漏掉任意一层，.navbar-expand-lg 的折叠逻辑就失效——JavaScript 插件只监听特定结构下的 .navbar-collapse 元素。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 常见错误：
<nav class="navbar"><a href="#">Home</a></nav>→ 没有.navbar-brand和.navbar-nav，导致移动端汉堡菜单不出现 - 为什么必须这样？因为
navbar.js的源码里硬编码了querySelector('.navbar-nav')，不是靠 class 名动态推导 - 兼容性坑：
.btn-group在 IE11 下需要display: inline-flex，但 Bootstrap 4/5 默认用flex，所以老项目升级时按钮会错位
默认样式安全逻辑：重置 ≠ 清除，而是“可控归一”
你手写的 * { margin: 0; padding: 0; } 是暴力清零，而 Bootstrap 的 reboot.scss 是选择性归一：保留 <h1> 的默认 margin-top，但重设 margin-bottom；对 <button> 统一 appearance: none 防止 Safari 圆角，又不碰 <input type="file"> 的原生 UI。
立即学习“前端免费学习笔记（深入）”；
- 容易被忽略的点：
.table的border-collapse: collapse是强制启用的，如果你在外部加了border-spacing: 10px，会被覆盖——这不是 bug，是设计使然 - 调试建议：查
node_modules/bootstrap/scss/reboot.scss，重点关注@include _reset-root()和_type.scss里的 heading 规则 - 为什么比自己写 reset 更安全？它经过 10 年以上跨浏览器测试，知道 Chrome 的
fieldsetmargin 和 Firefox 的details默认行为差异在哪
真正卡住人的从来不是“怎么用”，而是“为什么不能那样用”。看源码不是为了抄，是为了一眼看穿那个 class 背后藏着几层计算、几个 DOM 约束、多少浏览器补丁——这些细节，文档不会写，但源码全在那儿。
