bootstrap 5栅格不生效需检查container与row嵌套是否正确，必须container→row→col三层结构；响应式断点从col-sm-起，无col-xs-；按钮异常多因css未加载或被覆盖；modal需data-bs-*属性及bootstrap.bundle.min.js；自定义主题需调整$input-border-color等sass变量。
Bootstrap 5栅格系统不生效？检查container和row是否嵌套正确
Bootstrap 5的栅格依赖严格的父容器结构：必须用container（或container-fluid）包裹row，再由row包裹col。漏掉任意一层，列宽会塌陷、间距错乱，甚至完全不响应。
-
container提供水平居中和固定最大宽度；container-fluid则铺满整个视口宽度——别混用或省略 -
row内部必须只放col类元素，直接塞div或文本会导致负margin失效、左右溢出 - 常见错误：
<div class="container"><div class="col-6">内容</div></div>——缺row，列不会浮动对齐 - 响应式断点从
col-sm-开始（col-是xs），没有col-xs-前缀，写错会全屏按col-渲染
使用btn类按钮时样式异常？确认是否加载了Bootstrap CSS且无CSS优先级冲突
按钮样式丢失或部分失效，90%不是代码写错，而是CSS加载顺序或覆盖问题。Bootstrap 5已移除jQuery依赖，但CSS仍需完整引入，且不能被后加载的全局样式暴力重置。
- 检查HTML头部是否同时引入了Bootstrap CSS和JS——JS非必需，但CSS必须，且路径正确（如
bootstrap.min.css） - 避免在自定义CSS里用
button { ... }全局重置，它会干掉btn的display、padding等关键声明 -
btn-outline-*和btn-*颜色类不能混用（如btn btn-primary btn-outline-secondary），后者会覆盖前者背景色，但边框/文字色逻辑冲突 - 若用Sass自定义主题，确保
$enable-rounded: false等变量在@import前定义，否则默认圆角仍存在
Modal弹窗点不开？重点查data-bs-* 属性和bootstrap.bundle.min.js是否到位
Bootstrap 5把所有data属性前缀从data-统一改为data-bs-，旧教程里的data-toggle="modal"会彻底失效；同时，JS行为依赖bootstrap.bundle.min.js（含Popper），单独引bootstrap.min.js无法触发下拉、Tooltip、Modal等组件。
- 触发按钮必须带
data-bs-toggle="modal"和data-bs-target="#myModal"（ID要匹配目标div的id） - Modal容器需有
class="modal"，且内部结构含.modal-dialog→.modal-content→.modal-header/.modal-body，缺任一环节都可能白屏 - 如果控制台报
TypeError: bootstrap__default.a.Modal is not a constructor，说明JS没加载成功，或用了未打包Popper的精简版JS文件 - 动态插入的Modal（如AJAX加载后append），需手动初始化：
new bootstrap.Modal(document.getElementById('myModal')).show()
自定义主题颜色后form-control边框变灰？注意$input-border-color变量作用域
Bootstrap 5的表单控件默认边框色由Sass变量$input-border-color控制，但它受$enable-dark-mode和$theme-colors影响。单纯改$primary值，不重设$input-border-color，会导致输入框在light/dark模式下始终用默认灰。
立即学习“前端免费学习笔记（深入）”；
- 在自定义Sass中，应在
@import "bootstrap/scss/functions";之后、@import "bootstrap/scss/variables";之前，覆盖$input-border-color（例如：$input-border-color: #495057;） -
form-control的focus状态边框色由$input-focus-border-color控制，若想高亮，必须同步修改该变量，否则点击后还是灰色 - 使用CDN时无法改Sass变量，只能靠CSS覆盖：
.form-control:focus { border-color: #0d6efd !important; box-shadow: 0 0 0 0.25rem rgba(13,110,237,.25) !important; }——但需注意!important可能干扰其他组件 - 暗色模式下
.form-control会自动切为background-color: $gray-800，若没配$body-bg和$body-color，文字可能看不清
栅格和组件看着简单，但Bootstrap 5的断点逻辑、data属性命名、Sass变量链、CSS优先级这几处，只要一处没对齐，就容易卡住半天。尤其从v4升级过来的人，习惯性写data-toggle或漏container，调试时得先盯死这些硬性约定。
