Bootstrap导航栏在移动端不显示问题求助

嘿，我看你用的是Bootstrap 4.1.0的Minty主题，桌面端导航正常但移动端没显示，这大概率是几个常见的小问题导致的，我给你一步步捋清楚：

1. 别漏了Bootstrap的JS文件！ #

Bootstrap的移动端折叠菜单（就是那个汉堡按钮展开收起的功能）依赖jQuery和Bootstrap JS，你现在只引入了CSS，没加JS部分肯定不行。而且顺序要对：先加载jQuery，再加载Bootstrap JS，把这段代码放在</body>标签前面就行：

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

2. 检查导航栏的HTML结构是否合规 #

Bootstrap 4的响应式导航栏有固定的结构要求，少了哪部分都不行：

• 要有带navbar-toggler类的汉堡按钮，按钮上得有data-toggle="collapse"和data-target="#你的菜单容器ID"属性
• 导航菜单要放在带collapse navbar-collapse类的容器里，容器的id得和按钮的data-target值完全对应
• 导航栏根元素要加navbar-expand-lg（这个类控制屏幕大于lg尺寸时展开菜单，小于时自动折叠）

给你个标准的结构参考，对比着看看你的代码缺了啥：

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <a class="navbar-brand" href="#">International Pvt. Ltd.</a>
  <!-- 移动端汉堡按钮 -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <!-- 折叠的导航菜单容器 -->
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
    </ul>
  </div>
</nav>

3. 看看自定义CSS有没有搞破坏 #

有时候自己写的CSS会不小心把导航栏元素隐藏了，比如加了display: none !important这种强制规则。你可以按F12打开浏览器开发者工具，切换到移动端视图，看看导航菜单元素的样式，检查它默认状态下是不是display: none，点击汉堡按钮后有没有变成block或flex。

4. 确认viewport元标签没问题 #

你已经加了<meta name="viewport" content="width=device-width, initial-scale=1.0">，这个是对的，确保移动端浏览器能正确识别屏幕宽度，这是响应式布局的基础，不用改。

要是按上面的步骤排查完还是不行，把完整的header.php代码贴出来，我再帮你精准定位问题~

内容的提问来源于stack exchange，提问作者Harun Anwar