alert-dismissible 不关闭 wen 点击关闭按钮 bootstrap laravel

Question

当我单击关闭按钮时，它不会关闭通知。我错过了什么吗？

（警报右上角的“x”符号）

这里是这个警报的具体代码。如果有帮助，我正在使用 Laravel 版本 5.8.15 和最新的引导程序

<div class="mg-auto justify-content-center">
        @if ($errors->any())
            <div class="alert alert-warning alert-dismissible" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="alert-heading">Oops! Something went wrong!</h4>
                <p>
                    @foreach ($errors->all() as $error)
                        - {{ $error }}<br>
                    @endforeach
                </p>
            </div>
        @endif
    </div>

我的脚本文件对齐方式：

<script src="{{ asset('js.jquery-341.js') }}"></script>
<script src="{{ asset('js/bootstrap.min.js') }}"></script>

Answer 1

您是否确保正确集成了bootstrap's javascript plugin？你必须在调用 jQuery 之后调用它：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js" ></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js" ></script>

<div class="mg-auto justify-content-center">
        @if ($errors->any())
            <div class="alert alert-warning alert-dismissible" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="alert-heading">Oops! Something went wrong!</h4>
                <p>
                    @foreach ($errors->all() as $error)
                        - {{ $error }}<br>
                    @endforeach
                </p>
            </div>
        @endif
    </div>