Bootstrap Header实现问题：导航栏始终显示移动端视图求助

嘿，我之前也踩过一模一样的坑，折腾了好一会儿才搞定，给你列几个最优先级的排查点，按顺序检查应该就能解决：

• 先确认<head>里有没有加视口元标签
  Bootstrap的响应式布局完全依赖这个标签，没加的话浏览器会默认把页面当成桌面端宽度渲染，直接触发导航栏的折叠样式。赶紧补上这段代码：

  <meta name="viewport" content="width=device-width, initial-scale=1">
  

• 检查导航栏的核心类是否正确
  你有没有给<nav>标签加navbar-expand-{breakpoint}类？比如navbar-expand-lg意思是在屏幕宽度≥992px（lg断点）时展开导航栏，小于这个宽度才折叠成移动端样式。如果没加这个类，导航栏默认会一直处于折叠状态，也就是你看到的移动端视图。

• 验证Bootstrap文件的引入是否完整且顺序正确
  如果用的是Bootstrap 5，要确保先引入CSS，再引入包含Popper的Bootstrap JS（不用单独引入jQuery）：

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  

  要是用Bootstrap 4，得先引jQuery，再引Popper，最后是Bootstrap JS，顺序错了会直接导致响应式功能失效。

• 排查自定义CSS的干扰
  有时候自己写的CSS会不小心覆盖Bootstrap的媒体查询样式，比如强制给navbar-collapse设置了display: block，或者给导航栏加了固定宽度。打开浏览器开发者工具（按F12），选中导航栏元素，看看有没有异常样式被强制应用了。

按这个步骤查下来，大概率能解决你的问题。我当初就是漏加了视口标签，折腾了半天😂

内容的提问来源于stack exchange，提问作者The UndertakerGL