twitter-bootstrap – 点击导航栏后,下拉菜单中的Navbar折叠不会
发布时间:2020-12-18 00:25:39 所属栏目:安全 来源:网络整理
导读:所以,我刚刚开始使用Bootstrap 3,而且我希望我的标题被固定在顶部,它的内容与身体内容垂直对齐,最后是响应. 一切正常,除了点击折叠的导航栏似乎不起作用.点击这些小图标与三个酒吧一个其他不显示我的下面的列表. 我知道这可能是一个非常基本的错误,但在这里
所以,我刚刚开始使用Bootstrap 3,而且我希望我的标题被固定在顶部,它的内容与身体内容垂直对齐,最后是响应.
一切正常,除了点击折叠的导航栏似乎不起作用.点击这些小图标与三个酒吧一个其他不显示我的下面的列表. 我知道这可能是一个非常基本的错误,但在这里点击这个孩子,不行: 我觉得我的标题中的类可能会出错. 这是我的代码: <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-target相同的类添加到导航栏的nav元素中:
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse"> 和: <nav class="collapse navbar-collapse" role="navigation"> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |