个人中心
gpt4 book ai didi

html - Bootstrap 4.1.3，下拉菜单不起作用

转载 作者：行者123 更新时间：2023-11-28 00:16:32 27 4
gpt4 key购买 nike

我使用的是 Bootstrap 4.1.3，我尝试使用下拉菜单进行导航。我按照这个例子:https://getbootstrap.com/docs/4.1/components/navs/#using-dropdowns

但是，它不起作用。

你能帮帮我吗？

非常感谢。

我的代码

<div>
     <ul class="nav justify-content-center">
          <li class="nav-item dropdown">
                 <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Oeuvres</a>
                 <div class="dropdown-menu">
                     <a class="dropdown-item" href="/" th:href="@{/oeuvres/}">Toutes les oeuvres</a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="/" th:href="@{/oeuvres/livres/}">Livres</a>
                     <a class="dropdown-item" href="/" th:href="@{/oeuvres/magasines/}">Magasines</a>
                 </div>
            </li>
       </ul>
  </div>

编辑 1:JS 文件(https://getbootstrap.com/docs/4.1/getting-started/introduction/#js)

<head xmlns:th="http://www.thymeleaf.org" th:fragment="header">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" th:href="@{/css/main.css}">
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/popper.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/main.js}"></script>
    <title>Bibliothèque</title>
</head>

enter image description here

最佳答案

我已经截取了您的代码。它似乎按预期工作。

也许您没有包含 JavaScript 文件。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<div>
  <ul class="nav justify-content-center">
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Oeuvres</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="/" th:href="@{/oeuvres/}">Toutes les oeuvres</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="/" th:href="@{/oeuvres/livres/}">Livres</a>
        <a class="dropdown-item" href="/" th:href="@{/oeuvres/magasines/}">Magasines</a>
      </div>
    </li>
  </ul>
</div>

关于html - Bootstrap 4.1.3，下拉菜单不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55076312/

27 4 0
文章推荐： c++ - else if 预期表达式 c++/Xcode
文章推荐： c++ - 将对象转换为 vector 的 const_iterator
文章推荐： c++ - E2316 'any_of' 不是 'std' 的成员
文章推荐： c++ - 使用链表实现堆栈，调试断言失败
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com