Question

我的网站上的下拉菜单在移动设备上无法打开。我遵循了许多在网络上发布的提示和技巧，但仍然找不到解决方法！

这是我的html：

<nav id="nav-menu-container">
   <ul class="nav-menu">
     <li class="dropdown" data-dropdown="dropdown" >
        <button style="padding: 0 8px 10px 8px; font-face: sans-serif;color:#fff; font-weight: 700;font-size: 13px;text-transform: uppercase;opacity: 1;background-color: Transparent;border: 0pt" data-toggle="collapse" >About</button>
           <ul class="dropdown-menu" style="padding: 0 8px 10px 8px; width: 15px;font-face: sans-serif;color:#fff; font-weight: 700;font-size: 13px;text-transform: uppercase;opacity: 1;background-color: Transparent;border: 0pt">
              <li><a style="color:#fff" tabindex="-1" href="{{ url_for('main.about') }}#who">About Us</a></li>
              <li><a style="color:#fff" tabindex="-1" href="{{ url_for('main.about') }}#team">Team</a></li>
              <li><a style="color:#fff" tabindex="-1" href="{{ url_for('main.faq') }}">FAQ</a></li>
              <li><a style="color:#fff" tabindex="-1" href="https://www.youtube.com/watch?v=OZLNAHYpL14">Demo</a></li>
          </ul>
    </li>
  </ul>
</nav>

CSS导入：


  <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="lib/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">

JS：

<script src="lib/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="lib/bootstrap/js/bootstrap-dropdown.js"></script>

Answer 1

将Jquery添加到您的脚本部分。.引导程序才能正常工作。.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

Bootstrap下拉列表不适用于移动设备

1 个答案: