📌 遇到的问题

• 在手机端（小屏幕）访问博客时，导航栏的折叠按钮（汉堡菜单）可以点击，但展开后 没有显示“文章 / 联系表单 / 前端演示” 这些菜单项。
• 这导致导航虽然折叠/展开功能正常，但实际内容不可见。

📌 解决方法

1. 修改 index.html

   • 在 <nav class="navbar"> 部分，确认导航菜单项完整写入 <ul class="navbar-nav"> 里。

   • 示例：

     <ul class="navbar-nav ms-auto">
       <li class="nav-item"><a class="nav-link" href="#articles">文章</a></li>
       <li class="nav-item"><a class="nav-link" href="#contact">联系表单</a></li>
       <li class="nav-item"><a class="nav-link" href="#demo">前端演示</a></li>
     </ul>
     
     

2. 检查 Bootstrap 折叠属性

   • 确认汉堡按钮有：

     <button class="navbar-toggler" type="button"
             data-bs-toggle="collapse"
             data-bs-target="#navbarNav">
       <span class="navbar-toggler-icon"></span>
     </button>
     
     

   • 对应的容器：

     <div class="collapse navbar-collapse" id="navbarNav">
       ...导航菜单...
     </div>
     
     

3. 修复样式冲突

   • 在 core.css、responsive.css 中补充或调整 .navbar 和 .collapse 的样式，避免展开时被覆盖或隐藏。

📌 结果

• 修改完成后，手机端导航栏不仅能折叠，还能正确显示“文章 / 联系表单 / 前端演示”。
• ✅ 手机端导航显示问题已解决。