Twitter bootstrap 单击导航栏后,导航栏折叠不会随下拉菜单展开
所以,我刚刚开始使用Bootstrap3,我希望我的标题固定在顶部,其中的内容与正文中的内容垂直对齐,最后是响应性 除了单击折叠的导航栏似乎不起作用之外,一切正常。点击那些有三条横线的小图标,并不会显示我下面的列表 我知道这可能是一个非常基本的错误,但点击这里的这个孩子,不起作用: 我想我的标题中的类可能有问题 这是我的代码:Twitter bootstrap 单击导航栏后,导航栏折叠不会随下拉菜单展开,twitter-bootstrap,twitter-bootstrap-3,Twitter Bootstrap,Twitter Bootstrap 3,所以,我刚刚开始使用Bootstrap3,我希望我的标题固定在顶部,其中的内容与正文中的内容垂直对齐,最后是响应性 除了单击折叠的导航栏似乎不起作用之外,一切正常。点击那些有三条横线的小图标,并不会显示我下面的列表 我知道这可能是一个非常基本的错误,但点击这里的这个孩子,不起作用: 我想我的标题中的类可能有问题 这是我的代码: <header class="navbar navbar-default navbar-fixed-top" role="banner"> <div
<header class="navbar navbar-default navbar-fixed-top" role="banner">
<div class="col-10">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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="#">Logo Text</a>
</div>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav navbar-right">
<li class="home_button"> <a href="#"> <span class="glyphicon glyphicon-home"></span> </a> </li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><b class="caret"></b></a>
<ul class="dropdown-menu">
<li> <a href="#" > My Account </a> </li><br>
<li> <a href="#"> Logout </a> </li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</header>
但我不认为这会导致这个问题
我在html标题之前包含的内容包括:
<script src="/static/js/jquery-1.10.2.min.js"></script>
<script src="/static/js/jquery-migrate-1.2.1.js"></script>
<script type="text/javascript" src="/static/js/bootstrap-3.0.0-min.js"></script>
<link href="/static/css/bootstrap-3.0.0.css" rel="stylesheet" media="screen">
<link href="/static/app/bssgame2/css/my_custom.css" rel="stylesheet" media="screen">
这些都在我的本地目录中
搜索“塌陷不工作”/“塌陷单击不工作”会显示一系列结果,这些结果似乎与此图标本身未显示的问题有关
包括引导附带的collapse.js也无法解决此问题。折叠导航栏使用折叠插件,请参阅:。因此,在导航栏按钮中添加数据toggle=“collapse”和数据目标。并将用于数据目标的同一类添加到导航栏的nav元素中:
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse">
以及:
有关从Bootstrap v3到Bootstrap v4的更多信息。对于通过web搜索到达此处的其他人: 我也有同样的问题——无法扩展导航栏——但我所有的代码都很好。如果您已经检查了
数据切换
per的答案,但仍然存在问题
我的问题是,我有一个网络级的广告拦截器,它阻止了我的一些CDN'ed脚本。
Facepalm。您的按钮定义了
数据目标=“.navbar-ex1-collapse”
,但您尚未将此类添加到nav。使用
,您的代码将运行良好。。。谢谢老实说,我一直在使用bootstrap,但不知道这些数据切换和类似的东西实际上做了什么。请添加您的评论作为答复,我将接受。:)打字错误data target=“navbar collapse”
应该是data target=“.navbar collapse”
.Typoclass=“navbar toggler”
应该是class=“navbar toggler”
。
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<nav class="collapse navbar-collapse" role="navigation">