Bootstrap前端框架面试常见问题汇总-Bootstrap教程-PHP中文网

bootstrap 5 不需要 jquery，已改用原生 dom api；popper.js 仅在使用 dropdown 等定位组件时可选引入；.col-sm-6 在

bootstrap前端框架面试常见问题汇总

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></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="max-width:90%" → 填满容器，可能裁边
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"></button>
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; }，导致永远不隐藏