Bootstrap 5 最稳妥，需禁用响应式字体缩放（$enable-responsive-font-sizes: false 或 CSS 变量覆盖 --bs-body-font-size），并规范使用 container、断点类（如 col-12 col-sm-6 col-lg-4）和 sticky-top 包裹结构。
直接用 Bootstrap 5 搭毕业设计系统最稳妥，不依赖 jQuery、断点全、语义清晰，但必须手动关掉默认的 font-size 响应式缩放（$enable-responsive-font-sizes: false），否则答辩时在大屏上文字小得看不清。
选 Bootstrap 5 还是 4？关键看答辩设备和部署环境
Bootstrap 5 是当前主力版本，移除了 jQuery 依赖，JS 插件全部重写为原生 addEventListener，加载更快、调试更直观。但如果你的毕设要跑在老单位机或教学机（仍用 IE11 或旧版 Edge），就得退到 Bootstrap 4.6 —— 它仍支持 IE10+，且文档示例更“手把手”。不过注意：bootstrap@4 的 popper.js 版本必须锁定在 v1.16.1，新版 Popper 2 不兼容。
- 答辩现场用 Chrome/Firefox/Safari → 无脑选
bootstrap@5.3.3 - 指导老师明确要求“能跑在机房 Win7 + IE11” → 用
bootstrap@4.6.2+jquery@3.6.0+popper@1.16.1 - 用 Vite 或 Vue/React 脚手架 → 直接
npm install bootstrap@5，别引 CDN，避免离线演示失败
container 和 container-fluid 别混用，毕业系统有固定宽度需求
毕设系统不是营销页，后台管理、论文展示、实验数据页都需要视觉聚焦和阅读舒适区。盲目用 container-fluid 会让内容撑满整屏，在 27 寸显示器上阅读体验极差。正文区域一律用 container；仅仪表盘图表、全屏轮播图等少数模块才用 container-fluid。
-
container在lg断点后固定为960px（BS5 默认），适合表单、列表、详情页 - 若需更宽（比如展示宽表格），改用
container-lg或自定义max-width，别动container-fluid - 导航栏顶部加
sticky-top时，必须包裹在container外层，否则 sticky 行为错乱
栅格列类名写法错误，会导致手机上内容堆成一坨
常见错误是只写 col-md-6，没补 col-12。Bootstrap 5 的断点是“向上生效”，col-md-6 只在 md 及以上生效，xs 下默认是 col-12 —— 但这是隐式行为，一旦你中间漏了某一级（比如写了 col-sm-6 col-lg-4 却没写 col-md-?），md 尺寸就会回退到 display: block，三列变一列还带巨大 margin。
- 安全写法：每列都从
col-12起手，再叠加响应式类，如col-12 col-sm-6 col-lg-4 - 表格类布局慎用
col，改用table-responsive包裹<table>，否则小屏横向滚动失效<li>卡片组（<code>card-group）已废弃，改用row+col+card组合，控制更细
自定义主题别碰 _variables.scss 全局文件，毕业时间紧就改 CSS 变量
毕设不需要完整 Sass 编译链。Bootstrap 5 支持 CSS 自定义属性（CSS Variables），直接在 里加 <style></style> 覆盖即可，比如：
:root {
--bs-primary: #2c3e50;
--bs-secondary: #95a5a6;
--bs-body-font-size: 1rem; /* 关键：禁用响应式字体 */
}这样既避开 Webpack/Vite 配置，又确保答辩 PPT 投影时字号稳定。如果用了深色模式切换，记得同步覆盖 --bs-body-color 和 --bs-border-color，否则边框在暗色下会消失。
真正容易被忽略的是 viewport meta 标签——很多同学复制模板时漏掉 user-scalable=no，结果答辩时老师手滑双击放大，整个页面错位。务必检查 HTML 里有没有这行：<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">，shrink-to-fit=no 是防止 iOS Safari 自动缩放的关键。
