Bootstrap 5 栅格需严格遵循 container → row → col 嵌套规则，漏掉 row 会导致负 margin 缺失、列宽不准；col-auto 与 col 混用时，前者自适应内容宽度，后者均分剩余空间；响应式须显式声明 col-12 col-md-6 才实现小屏单列、中屏双列。
Bootstrap 5 的 container 和 row/col 怎么套才不塌？
Bootstrap 的栅格系统不是“套上就灵”，常见错误是嵌套错层或漏掉 row。比如直接把 col-6 放在 container 里，会丢失左右负 margin，导致列宽不准、间隙错乱。
-
container或container-fluid必须包住row，不能跳级 -
row必须包住所有col-*，它负责清除浮动并提供负 margin 抵消列的 padding - 列总和超过 12 不会自动换行，而是强制挤压——要换行得手动加
row或用flex-wrap: wrap（但 Bootstrap 5 默认已启用）
<div class="container">
<div class="row">
<div class="col-8">主内容</div>
<div class="col-4">侧边栏</div>
</div>
</div>
用 col-auto 和 col 混搭时，为什么宽度忽大忽小？
col-auto 是内容自适应，col 是等分剩余空间，两者混用时容易误判“剩余空间”从哪算起。典型问题：父 row 里有 col-auto + col，但 col 却撑不满剩余宽度。
-
col-auto只占内容真实宽度（含 padding），之后剩余空间才由col平分 - 如果
col-auto内容很长（比如一长串无空格 URL），可能溢出破坏布局，需加text-truncate或overflow-hidden - 避免在同一个
row中混用col-*（固定数值）和col（无参数），语义冲突：前者按 12 栅格算，后者按 flex 剩余空间算
响应式断点写 col-md-6 还是 col-6 col-md-6？
只写 col-md-6 是错的——它只在中屏及以上生效，小屏（xs）下会退化为 col-12（即默认全宽）。这不是 bug，是 Bootstrap 5 的移动优先设计逻辑：未声明的断点，继承上一级断点行为；而最小断点 xs（<100% 宽度）没有前缀，所以必须显式声明。
- 要“小屏单列、中屏双列”，就得写
col-12 col-md-6 - 如果漏了
col-*，小屏下该列会变成width: auto，可能收缩成内容宽度，甚至与其他列挤在同一行 - 断点顺序必须从小到大：
col-<em></em>→col-sm-→col-md-*→ … 否则 CSS 层叠会覆盖预期效果
引入 Bootstrap CSS 后，自己的按钮样式突然失效？
最常见原因是 Bootstrap 的 button 样式带 !important（尤其在表单控件重置部分），或者你写的 CSS 选择器权重不够。比如只用 .btn-primary 覆盖，但 Bootstrap 用了 button.btn.btn-primary，天然更高权。
立即学习“前端免费学习笔记（深入）”；
- 不要靠增加
!important硬顶，优先提升选择器 specificity：用body .my-btn或加属性选择器如button.my-btn[type="submit"] - 更稳妥的做法是利用 Bootstrap 的 Sass 变量或 CSS 自定义属性（如
--bs-btn-bg）在加载后覆盖，而不是写死颜色值 - 如果只是原型阶段，干脆删掉 Bootstrap 的
forms.css或用 CDN 的精简版（不含 form reset），省去样式打架时间
原型阶段别碰 offcanvas 或 tooltip 这类 JS 组件——它们依赖 Popper 和 Bootstrap JS，光引 CSS 不会动。真要快速验证交互，宁可用原生 details/summary 或纯 CSS :focus-within 模拟。
