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
Bootstrap navbar toggle is not working with Laravel
提问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 link
tag where you actually should be using the script
tag:
问题是您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>