我正在尝试实现twitter bootstrap可折叠导航栏。在桌面导航栏上可见,但在移动屏幕上它不可见。 这是View Part
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand"><img src="/x/img/X.png" style="width:80px; position:relative; top:-20px;"></img></h3>
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right" style="margin-top:15px;background-color:rgba(255,255,255,.4)">
<li class="active"><a class="call_us btn btn-default no-rounded btn-hollow" th:text="${'+91 444}" style="cursor:default; pointer-events:none;"> Call Us 555</a></li>
<li ><a th:href="@{/X}" href="#">X</a></li>
<li><a th:href="@{/Y}" href="#">Y</a></li>
<li><a th:href="@{/Z}" href="#">Z</a></li>
<li><a th:href="@{/T}" href="#">C</a></li>
<li class="active"><a th:href="#" href="#">Blog</a></li>
<!--li><a href="#">Help</a></li-->
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
有人可以帮我解决这个问题。我在我的路径中包含了collapse.js。
答案 0 :(得分:1)
您错过了navbar
类,它是Bootstrap中默认导航的第一行。请参阅Docs。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand"><img src="http://placehold.it/350x150" style="width:80px; position:relative; top:-20px;"></img></h3>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right" style="margin-top:15px;background-color:rgba(255,255,255,.4)">
<li class="active"><a class="call_us btn btn-default no-rounded btn-hollow" th:text="${'+91 444}" style="cursor:default; pointer-events:none;"> Call Us 555</a>
</li>
<li><a th:href="@{/X}" href="#">X</a>
</li>
<li><a th:href="@{/Y}" href="#">Y</a>
</li>
<li><a th:href="@{/Z}" href="#">Z</a>
</li>
<li><a th:href="@{/T}" href="#">C</a>
</li>
<li class="active"><a th:href="#" href="#">Blog</a>
</li>
<!--li><a href="#">Help</a></li-->
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
</div>
</div>
&#13;