9

所以，我刚刚开始使用 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 也没有解决这个问题。

4

2 回答 2

19

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.

于 2013-09-25T19:38:14.860 回答
1

对于通过网络搜索到达这里的其他人：

我遇到了同样的问题 - 无法扩展导航栏 - 但我的所有代码都很好。如果您已经检查了data-toggle每个@Bass Jobsen的答案，但仍然有问题，请检查您的 CDN。

我的问题是我有一个网络级广告拦截器，它阻止了我的一些 CDN 脚本。

掌心。

于 2018-02-23T19:21:14.527 回答