Bootstrap 导航栏切换不适用于 Laravel

Posted 2023-03-14

【中文标题】Bootstrap 导航栏切换不适用于 Laravel

【英文标题】：Bootstrap navbar toggle is not working with Laravel

【发布时间】：2015-09-02 09:09:52

【问题描述】：

我有以下代码

<div class="container">
    <div class="row">
        <nav class = "navbar navbar-inverse navbar-fixed-top">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topMenu" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Brand</a>
            </div>
            <div class = "collapse navbar-collapse" id = "topMenu">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#" class = 'navAnchor'>Link</a></li>
                    <li><a href="#" class = 'navAnchor'>Link</a></li>
                    <li><a href="#" class = 'navAnchor'>Link</a></li>
                    <li><a href="#" class = 'navAnchor'>Link</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </nav>
    </div>
</div>

我也尝试过改变

<div class = "collapse navbar-collapse" data-toggle="collapse" id = "topMenu">

但是当我调整屏幕大小以在较小的屏幕上查看时，会出现 3 个条形图，但单击它们什么也不做。

编辑 在页面顶部

<link rel="stylesheet" href=" URL::asset('assets/css/bootstrap.min.css') " />

在底部，内部body

<link rel="text/javascript" href=" URL::asset('assets/js/jquery.js') " />
<link rel="text/javascript" href=" URL::asset('assets/js/bootstrap.min.js') " />

通过查看控制台（检查元素，它没有显示错误），所有东西都被正确加载。 有人可以指导我正确的方式吗？

谢谢

【问题讨论】：

你导入了bootstrap css和js文件吗？

是的，因为我也更新了我的问题。

【参考方案1】：

问题在于您使用的是link 标签，而实际上您应该使用script 标签：

<link rel="text/javascript" href=" URL::asset('assets/js/jquery.js') " />
<link rel="text/javascript" href=" URL::asset('assets/js/bootstrap.min.js') " />

Javascript 应该在脚本标签中，以便加载到您的页面中：

<script type="text/javascript" src=" URL::asset('assets/js/jquery.js') "></script>
<script type="text/javascript" src=" URL::asset('assets/js/bootstrap.min.js') "></script>

这应该可以解决您的问题

【讨论】：

这就是我喜欢*** 的原因 :) 感谢您指出确切的位置

没问题。乐于助人。

【参考方案2】：

您已将 javascript 放置在 link 标记内，而不是 script 标记内。Link 用于 css 和 js 我们使用脚本。 将其写在脚本标签内：

<script type="text/javascript" src="your_source_for_script"></script>