我的下拉菜单的子菜单在任何浏览器上都不显示

Question

我使用 Laravel 框架使用 php 开发我的网站。下面是我的下拉菜单的源代码，但是子菜单不会显示在浏览器上。可能是什么问题？

<div class="btn-group">
        @guest
          <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
            My Account
          </button>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="{{route('login')}}">Login</a></li>
            <li><a class="dropdown-item" href="{{route('register')}}">Register</a></li>
          </ul>
        @endguest

        @auth
          <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
            {{Auth::user()->name}}
          </button>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="{{route('app_logout')}}">Logout</a></li>
          </ul>

        @endauth


      </div>

我尝试使用 Firefox、Google Chrome 和 Microsoft Edge 浏览器，但仍然一无所获

Answer 1

根据您的代码片段：

Based on your code snippet:

html
Copy code
<button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
You are using data-bs-toggle="dropdown", which is correct for Bootstrap 5. However, Laravel 8 (as of my last update) ships with Bootstrap 4 by default, where the correct attribute would be data-toggle="dropdown" instead of data-bs-toggle="dropdown".

您正在使用 data-bs-toggle="dropdown"，这对于 Bootstrap 5 来说是正确的。但是，Laravel 8（截至我上次更新）默认情况下随 Bootstrap 4 一起提供，其中正确的属性是 data-toggle=" dropdown" 而不是 data-bs-toggle="dropdown"。

如果您打算使用 Bootstrap 5 功能，请确保您已更新 Laravel 项目以使用 Bootstrap 5。您可以通过更新 package.json 以包含 Bootstrap 5，然后运行 npm install ，然后运行 npm run dev 来编译您的资源来完成此操作.

致以诚挚的问候 丹麦哈菲兹 |质量检查助理 https://www.ictinnovations.com https://www.ictbroadcast.com