如何让导航栏（nav）下拉菜单实现响应式？移动端适配问题求助

我的导航栏（nav）和下拉菜单（drop-down menu）在桌面端正常工作，但在移动设备上无法正常使用。尝试用@media媒体查询调整但没解决，相关代码如下：

原CSS代码 #

@media only screen and(max - width: 700 px) {
  .navbar - nav {
    width: 100 % ;
    background: #F8F9FA;
    position: absolute;
    z - index: 2;
  }
}

原HTML代码 #

<nav class="navbar navbar-expand-lg navbar-light bg-light" id="navbarfixed">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" data-toggle="dropdown">
      <span class="navbar-toggler-icon"></span>
    </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="index.html" target="_blank">About<span class="sr-only"></span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="https://github.com/MaariaCaroline" target="_blank">Github</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="blog.html" target="_blank">Blog</a>
      </li>
      <div class="topnav" id="myTopnav">
        <div class="dropdown">
          <a href="language.html" target="_blank"><button class="dropbtn">Language resources
              <i class="fa fa-caret-down"></i>
            </button></a>
          <div class="dropdown-content">
            <a href="english.resources.html" target="_blank">English</a>
            </br>
            <a href="german.resources.html" target="_blank">German</a>
            </br>
            <a href="korean.resources.html" target="_blank">Korean</a>
            <br>
            <a href="japanese.resources.html" target="_blank">Japanese</a>
          </div>
        </div>
      </div>
      <li class="nav-item">
      </li>
    </ul>
  </div>
</nav>

排查出的问题点 #

• CSS语法错误：媒体查询的and后必须加空格，属性值和单位（比如700px）之间不能有空格；.navbar - nav这种带空格的选择器无效，浏览器无法识别。
• Bootstrap属性冲突：导航栏按钮同时设置了data-toggle="collapse"和data-toggle="dropdown"，两个触发事件冲突，导致移动端点击按钮无法正确展开折叠菜单。
• 下拉菜单结构不规范：自定义的.dropdown没有遵循Bootstrap响应式逻辑，在折叠菜单里无法正常触发展开；用<br>分隔菜单项是错误做法，应该用标准列表结构。
• 缺少Bootstrap JS依赖：折叠、下拉这类交互组件需要依赖jQuery、Popper.js和Bootstrap JS，没引入的话移动端交互完全失效。

修正后的代码 #

修正后CSS代码 #

@media only screen and (max-width: 700px) {
  .navbar-nav {
    width: 100%;
    background: #F8F9FA;
    position: absolute;
    z-index: 2;
  }
  /* 可选：优化移动端下拉菜单显示 */
  .dropdown-menu {
    position: static;
    float: none;
    width: 100%;
  }
}

修正后HTML代码 #

<nav class="navbar navbar-expand-lg navbar-light bg-light" id="navbarfixed">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="index.html" target="_blank">About<span class="sr-only"></span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="https://github.com/MaariaCaroline" target="_blank">Github</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="blog.html" target="_blank">Blog</a>
      </li>
      <!-- 改用Bootstrap标准下拉菜单结构 -->
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="language.html" target="_blank" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Language resources
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="english.resources.html" target="_blank">English</a>
          <a class="dropdown-item" href="german.resources.html" target="_blank">German</a>
          <a class="dropdown-item" href="korean.resources.html" target="_blank">Korean</a>
          <a class="dropdown-item" href="japanese.resources.html" target="_blank">Japanese</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

额外注意事项 #

• 必须按顺序引入Bootstrap依赖文件：

  <script src="jquery.min.js"></script>
  <script src="popper.min.js"></script>
  <script src="bootstrap.min.js"></script>
  

  （版本需与你使用的Bootstrap版本对应，Bootstrap 5可不用jQuery，但仍需Popper.js）
• 不要用<br>分隔下拉菜单项，Bootstrap的.dropdown-item自带间距样式，保持结构整洁即可。

内容的提问来源于stack exchange，提问作者Maria Gąsiewska