点击后导航栏折叠不会随着下拉菜单展开 [英] Navbar collapse not expanding with dropdown after clicking on it

问题描述

所以，我刚刚开始使用 Bootstrap 3，我希望我的标题固定在顶部，其中的内容与正文中的内容垂直对齐，最后，响应.

一切正常，只是点击折叠的导航栏似乎不起作用.单击那些带有三个横杠的小图标并没有显示我下面的列表.

我知道这可能是一个非常基本的错误，但是在这里点击这个孩子是行不通的:

我想我的标题中的类可能有问题.

这是我的代码:

<div class="col-10"><div class="容器"><div class="navbar-header"><button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-ex1-collapse"><span class="sr-only">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><a class="navbar-brand" href="#">标志文字</a>

<nav class="collapse navbar-collapse" role="navigation"><ul class="nav navbar-nav navbar-right">

<a href="#"><span class="glyphicon glyphicon-home"></span></a>

<a href="#" class="dropdown-toggle" data-toggle="dropdown"><b class="caret"></b></a><ul class="下拉菜单"><li><a href="#" >我的帐户</a></li><br><li><a href="#">注销</a>

</nav>

</标题>

我的自定义 css 中唯一的东西是:

@media(最小宽度:980px){身体{填充顶部: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 相同的类添加到导航栏的导航元素:

和:

更多关于迁移从 Bootstrap v3 到 Bootstrap v4 此处为文档.

So, I have just started using Bootstrap 3, and I want my header to be fixed at the top, content in it vertically aligned with the content in body, and lastly, responsive.

Everything works fine except that clicking on collapsed navbar doesn't seem to work. Clicking on those small icon with three bars one over other doesn't show me my list below.

I know this could be a very basic mistake but clicking on this kid right here, doesn't work:

I think I might be doing something wrong with classes in my header.

This is my code:

<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>

The only thing I have in my custom css is:

@media (min-width: 980px){
    body{
        padding-top: 70px;
    }
}

but I don't think that would be causing this problem.

The things I have included before my header in my html are:

<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">

which are all in my local directory.

Searching for "collapse not working"/"collapse click not working" shows me bunch of results which seem to be related to the problem of this icon itself not showing up.

Including collapse.js that came with bootstrap didn't fix this problem either.

解决方案

Collapsing of the navbar uses the collapse plugin, see: http://getbootstrap.com/javascript/#collapse. So add data-toggle="collapse" and a data-target to your navbar button. And add the same class as used for data-target to the nav element of your navbar:

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse">

and:

  <nav class="collapse navbar-collapse" role="navigation">

More about Migrating from Bootstrap v3 to Bootstrap v4 here in docs.

这篇关于点击后导航栏折叠不会随着下拉菜单展开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！