Bootstrap 导航栏切换不适用于 Laravel答案

【问题标题】：Bootstrap navbar toggle is not working with LaravelBootstrap 导航栏切换不适用于 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文件吗？
是的，因为我也更新了我的问题。

标签： jquery html css twitter-bootstrap laravel

【解决方案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>

这应该可以解决您的问题

【讨论】：

这就是我喜欢StackoverFlow 的原因 :) 感谢您指出确切的位置
没问题。乐于助人。

【解决方案2】：

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

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

【讨论】：