Laravel 5.7 中的引导下拉问题答案

【问题标题】：Bootstrap dropdown problem in Laravel 5.7Laravel 5.7 中的引导下拉问题
【发布时间】：2019-02-06 17:56:09
【问题描述】：

我昨天开始了一个新的 laravel 项目。遵循 YouTube 中一个人的指南。一切正常，直到我安装 laravel auth 并意识到引导下拉菜单都不起作用，即使我从他们的网站创建新的。

首先，我认为我在 composer 中搞砸了一些东西，因为我想摆脱 bootstrap，后来我改变了主意，把它放回去了。然后我创建了新的 Laravel 项目并从头开始。即使这样，我的下拉菜单也不起作用。我在 google 中检查了类似的问题，但没有一个有帮助。

【问题讨论】：

调试步骤如下： - 打开浏览器开发控制台并检查是否有任何错误，例如，由于错过了 jquery 脚本，引导库无法加载。检查项目中的引导程序版本。除了下拉菜单外，其他一切都有效吗？分享一些代码，以便我们提供帮助。
控制台没有错误。正如我在 package.json 文件中看到的，我运行“bootstrap”：“^4.0.0”和“popper.js”：“^1.12”。您希望看到哪部分代码？
那么按照文档here 一切顺利吗？
这意味着你的引导程序根本没有被加载。确保在视图中包含引导库。如果您使用的是 webpack，请检查您是否将外部库混合在一起，并将该库包含在您的主要刀片文件中。
好的，我将<script type="text/javascript" src="{{asset('js/app.js')}}"></script> 添加到我的主要刀片标签中，现在它似乎可以工作（除了所有其他没有按钮的示例），但现在我的控制台出现错误。 app.js:37421 [Vue 警告]：找不到元素：#app

标签： javascript php laravel popper.js

【解决方案1】：

默认情况下，bootstrap.bundle.js 不包含在您的 Laravel 应用程序中。添加这个：

打开'resources/js/bootstrap.js'文件并在该文件的最后一行添加以下代码。

require('bootstrap/dist/js/bootstrap.bundle');

点击保存并运行npm run dev，它终于可以工作了！

【讨论】：

【解决方案2】：

您的引导程序似乎根本没有加载。确保在视图中包含引导库。如果您使用的是 WebPack，请检查您是否将外部库混合为一个，并将该库包含在您的主要刀片文件中。

【讨论】：

【解决方案3】：

我遇到了同样的问题，这是因为 bootstrap 没有正确加载，我只是通过将此链接粘贴到 <head> 标签中来解决它

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

并将其粘贴到<body> 标签的下部区域

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

【讨论】：

【解决方案4】：

有时您应该更改脚本链接的顺序以使其正常工作

【讨论】：

感谢您的贡献。根据 SO 指南，您的建议可能会有所帮助，但更像是评论，而不是完整的、独立的答案。请更新有关如何执行您的建议的详细信息。链接也很好，但需要注意的是相关信息也必须嵌入到您的帖子中，因此即使该页面上的信息发生更改或链接不可用，它也是有效的。不鼓励仅链接和不完整的答案，并且可能会被删除。请记住，SO 上的大多数答案都需要解决 OP 问题所需的确切代码。或者干脆以评论的形式发布