所以,我刚刚开始使用 Bootstrap 3,我希望我的标题固定在顶部,其中的内容与正文中的内容垂直对齐,最后是响应式的。
一切正常,除了单击折叠的导航栏似乎不起作用。单击带有三个条的小图标并没有显示下面的列表。
我知道这可能是一个非常基本的错误,但是在这里点击这个 child ,不起作用:
我想我的标题中的类可能有问题。
这是我的代码:
<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>
我在自定义 CSS 中唯一拥有的是:
@media (min-width: 980px){
body{
padding-top: 70px;
}
}
但我认为这不会导致这个问题。
我在 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">
这些都在我的本地目录中。
搜索“折叠不起作用”/“折叠单击不起作用”会显示一堆结果,这些结果似乎与此图标本身未显示的问题有关。
包括 bootstrap 附带的 collapse.js 也没有解决这个问题。
最佳答案
导航栏的折叠使用折叠插件,见:http://getbootstrap.com/javascript/#collapse .因此,将 data-toggle="collapse"和 data-target 添加到您的导航栏按钮。并将与 data-target 相同的类添加到导航栏的 nav 元素中:
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse">
和:
<nav class="collapse navbar-collapse" role="navigation">
更多关于 Migrating从 Bootstrap v3 到 Bootstrap v4 here in docs .
关于twitter-bootstrap - 单击它后,导航栏折叠不随下拉菜单展开,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18976460/