Bootstrap 5 不需要 jQuery，已改用原生 DOM API；Popper.js 仅在使用 Dropdown 等定位组件时可选引入；.col-sm-6 在 <576px 屏幕不生效，需补 col-6 或 col-sm-6 配合 row；img-fluid 需配合 object-fit 控制填充方式；navbar-collapse 折叠失效多因 data-bs-toggle、data-bs-target 缺失或前缀错误。
Bootstrap 面试不考源码实现，只考你用没用对、踩没踩过坑、升级时敢不敢动。
Bootstrap 5 还需要 jQuery 吗？
不需要。Bootstrap 5 彻底移除了对 jQuery 的依赖，所有 JS 组件（如 Modal、Dropdown、Toast）都改用原生 DOM API 实现。
但注意两点：
- 如果项目里还混着 Bootstrap 4 的 JS 代码（比如用
$().modal('show')），直接升级到 v5 会报ReferenceError: $ is not defined -
Popper.js仍是可选依赖——只有用到Dropdown、Tooltip、Popover这类需要定位计算的组件时才需要引入；纯Button或Alert不依赖它 - 如果你用的是 CDN，Bootstrap 5 官方 CDN 默认不包含 Popper，得手动加一条
<script>引入，否则下拉菜单点不开、提示框位置错乱
.col-sm-6 在小屏幕下为什么没生效？
因为 .col-sm-6 的“sm”断点起效条件是 ≥576px，不是“所有小屏”。手机竖屏（比如 iPhone SE）宽度常为 375px 或 414px，根本达不到 sm 阈值，此时该类完全被忽略，列会默认堆叠成 100% 宽度。
立即学习“前端免费学习笔记（深入）”；
正确做法是补上更小断点：
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 要让所有设备都两列并排，写
col-6（无前缀，作用于所有视口） - 要兼容老版写法（如 Bootstrap 3/4 习惯），至少加
col-xs-12 col-sm-6；但 Bootstrap 5 已废弃xs前缀，直接用col-12 col-sm-6 - 检查是否漏了
row包裹：col-*必须是row的直接子元素，否则 margin/padding 错乱，视觉上“没生效”
img-fluid 和 object-fit 怎么配合用？
img-fluid 只负责等比缩放（max-width: 100%; height: auto），不控制裁剪或对齐。如果图片宽高比和容器不一致，会出现留白或拉伸。
这时候得靠 CSS 的 object-fit 补位：
-
<img src="..." class="img-fluid">+style="object-fit: cover;"→ 填满容器，可能裁边 -
style="object-fit: contain;"→ 完整显示，但可能有上下/左右空白 - 注意：IE 不支持
object-fit，如果必须兼容 IE，得换方案（比如用背景图 +background-size） - 别在
img上同时设height和object-fit: cover，否则破坏响应式行为
navbar-expand-* 类为什么有时折叠不了？
常见原因是漏掉了 data-bs-toggle="collapse" 和对应 id 的关联，或者没引入 Bootstrap 的 JS。
典型错误链：
- 写了
navbar-expand-md，但没加<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarContent"> -
data-bs-target指向的 ID 和实际div的id不一致（比如拼错成navbarConten） - 用了
navbar-expand-lg，但测试时窗口宽度刚好卡在 991.98px —— Bootstrap 断点是min-width，991.98px 属于md范围，自然不展开 - 自定义 CSS 覆盖了
.navbar-collapse的display，比如写了.navbar-collapse { display: block !important; }，导致永远不隐藏
最易被忽略的一点：Bootstrap 5 的所有 data 属性都加了 bs- 前缀，data-toggle 和 data-target 是 Bootstrap 4 写法，v5 下完全无效，控制台也不会报错，只是静默失效。
