下拉菜单不适用于Bootstrap 4和Laravel 6

ct2axkht 于 2023-10-22 发布在 Bootstrap

关注(0)|答案(6)|浏览(150)

Laravel 6和Bootstrap 4在我运行npm install命令之前，导航栏右侧的菜单一直工作得很好。在那之后，菜单停止工作...当我点击它什么也没发生。在菜单中有连接的用户名和注销。

布局：

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->
    <script src="{{ asset('/js/app.js') }}" defer></script>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    <!-- Styles -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link href="{{ asset('/css/app.css') }}" rel="stylesheet" type="text/css">

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></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>

</head>
<body style="overflow: hidden; ">
    <div id="app">
        @include('../inc/navbar')
        <main class="py-4">
            @yield('content')
        </main>
        <br>
        <br>
        <br>
        @include('../inc/footer')
    </div>
    </body>
</html>

导航栏：

<!-- Right Side Of Navbar -->
            <ul class="navbar-nav ml-auto">
                <!-- Authentication Links -->
                @guest
                    <li class="nav-item">
                        <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
                    </li>
                    @if (Route::has('register'))
                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
                        </li>
                    @endif
                @else <!-- This dropdown menu doesn't work-->
                    <li class="nav-item dropdown">
                        <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                            {{ Auth::user()->name . ' ' . Auth::user()->surname }} <span class="caret"></span>
                        </a>

                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="{{ route('logout') }}"
                               onclick="event.preventDefault();
                                             document.getElementById('logout-form').submit();">
                                {{ __('Logout') }}
                            </a>

                            <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                                @csrf
                            </form>
                        </div>
                    </li>
                @endguest
            </ul>

package.json：

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.19",
        "bootstrap": "^4.0.0",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.13",
        "popper.js": "^1.16.0",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.20.1",
        "sass-loader": "7.*",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    }
}

webpack.mix.js**

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

所以目前我不能从应用程序注销，因为菜单不工作。我在互联网上找到解决方案，我认为问题是波普。我如何配置Popper来解决这个问题，使菜单的工作？

laravel

来源：https://stackoverflow.com/questions/58823454/dropdown-menu-not-working-with-bootstrap-4-and-laravel-6

6条答案

按热度按时间

tkclm6bt1#

这是因为您当前在布局中使用的是bootstrap 4以前的版本（4.0.0）。

Laravel总是使用最新版本。

因此，只需将您的Bootstrap jQuery和JavaScript CDN脚本替换为最新版本（当前为4.4.x）。

在布局文件中添加：

只需在布局文件中添加这些最新的jQuery和JavaScript CDN脚本，您的CDN菜单将开始工作。

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

赞(0）回复(0）举报 2023-10-22

z6psavjg2#

你可以在Laravel 6中使用预置包进行前端的scalfolding

php artisan preset bootstrap
php artisan ui vue
npm install
npm run dev

赞(0）回复(0）举报 2023-10-22

shstlldc3#

我也有这个问题，没有一个答案对我有用。
我只是在所有脚本之上添加jquery：

<!-- jQuery -->
<script src="{{ asset('plugins/jquery/jquery.min.js') }}"></script>

现在一切都像一个魅力。

赞(0）回复(0）举报 2023-10-22

5t7ly7z54#

首先检查你的css和js文件的位置是否完美。然后将data-bs-toggle=“”改为data-toggle=“”。希望对你有所帮助。

赞(0）回复(0）举报 2023-10-22

khbbv19g5#

更新脚本（& L）Bootstrapnya

赞(0）回复(0）举报 2023-10-22

ttvkxqim6#

问题是您正在使用旧版本Bootstrap using Bootstrap 5

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous" defer></script>

提供的HTML代码似乎是导航菜单的一部分，带有用于用户身份验证的验证码。如果安装程序未按预期工作，可能有几个原因导致此问题。以下是您可以采取的一些常见故障排除步骤：
检查JavaScript和CSS：请确保已包含了用于该功能的必要JavaScript和CSS文件。看起来这个JavaScript正在使用Bootstrap的JavaScript组件（data-bs-toggle=“JavaScript”），所以请确保在项目中包含了Bootstrap的JavaScript和CSS文件。
检查JavaScript错误：打开浏览器的开发人员控制台（通常通过按F12或右键单击并选择“检查”），并查找可能导致浏览器出现问题的任何JavaScript错误。
检查 Bootstrap 版本：确保您使用的是正确版本的Bootstrap。如果您使用的是Bootstrap 5，请确保正确使用了data-bs-toggle属性。在Bootstrap 5中，data-bs-toggle属性应该设置为“”。
检查相关性：如果您使用其他JavaScript库或框架，请确保它们不会与Bootstrap的功能冲突。
验证HTML结构：确保HTML结构正确。您提供的代码似乎位于元素中，如果它是导航菜单的一部分，则应该位于元素中。

赞(0）回复(0）举报 2023-10-22

我来回答

下拉菜单不适用于Bootstrap 4和Laravel 6

6条答案

相关问题

热门标签

最新问答