Bootstrap 导航栏切换不适用于 Laravel

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/30886389/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-09-14 11:47:48  来源:igfitidea点击:

Bootstrap navbar toggle is not working with Laravel

jqueryhtmlcsstwitter-bootstraplaravel

提问by Mubin

I've following code

我有以下代码

<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>

I also have tried to change

我也尝试过改变

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

but when I resize the screen to view on smaller screen, 3 bars appear, but clicking on them just do nothing.

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

EDITat the top of page

在页面顶部编辑

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

and at the bottom, inside body

在底部,内部 body

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

and by viewing the console(inspect element, it shows no error), every thing is being loaded properly. can someone guide me to right way.

通过查看控制台(检查元素,它没有显示错误),每件事都被正确加载。有人可以指导我正确的方法。

Thanks

谢谢

回答by Koen van den Heuvel

What the problem is is that you are using the linktag where you actually should be using the scripttag:

问题是您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 should be in a script tag for it to load into your page:

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>

This should solve your problem

这应该可以解决您的问题

回答by sonam gupta

You have placed the javascript inside the linktag instead of scripttag.Linkis used for css and for jswe use script. write it inside the script tag as:

您已将 javascript 放置在链接标签而不是脚本标签中。Link用于 css 和js我们使用script。将其写在脚本标签中:

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