导航栏崩溃不起作用答案

【问题标题】：Navbar collapse not working导航栏崩溃不起作用
【发布时间】：2017-09-22 00:27:55
【问题描述】：

我已经尝试了几个小时来解决这个问题，但我无法理解它我想知道这里是否有人可以帮助我！

<!-- navbar -->
  <nav class="navbar navbar-default" role="navigation">
     <div class="navbar-header">
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
     </div>
     <div class="collapse navbar-collapse" id="myNavbar">
     <ul class="nav navbar-nav">
        <li class="upage"><a href="index.html">home</a></li>
        <li><a href="team.html">team</a></li>
        <li><a href="services.html">services</a></li>
        <li><a href="events.html">events</a></li>
        <li><a href="team.html">store</a></li>
     </ul>
     </div>
  </nav>
  <!-- navbar -->

这是我的 Bootstrap 导航栏的 HTML，但不幸的是，单击时折叠按钮不起作用

.navbar .nav > li > a {
    color:  #F2F4F4;
    font-family: 'Oxygen', sans-serif;
    font-weight: 300;
    font-size: 20px;
    text-transform: ;
    padding-left: 35px;
    text-decoration: none;
  }

.navbar-default {
  margin-top: 0px;
  background: #000;
  background: rgba(0,0,0,0.4);
  border-color: transparent;
}


@media (min-width: 768px){
    .navbar-nav {
        float:none;
        margin: 0 auto;
        display: table;
        table-layout: fixed;
    }
}

这是我的 CSS

谢谢，希望有人能帮帮我！

【问题讨论】：

标签： html css twitter-bootstrap twitter

【解决方案1】：

 <div class="navbar-header">
   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">  </button>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
 </div>

试试这个方法..

【讨论】：

【解决方案2】：

这是一个有效的 sn-p 检查这个，我添加了 bootstrap 样式表和 bootstrap.js 并包含 jquery 库请检查这个

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- navbar -->
  <nav class="navbar navbar-default" role="navigation">
     <div class="navbar-header">
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
     </div>
     <div class="collapse navbar-collapse" id="myNavbar">
     <ul class="nav navbar-nav">
        <li class="upage"><a href="index.html">home</a></li>
        <li><a href="team.html">team</a></li>
        <li><a href="services.html">services</a></li>
        <li><a href="events.html">events</a></li>
        <li><a href="team.html">store</a></li>
     </ul>
     </div>
  </nav>
  <!-- navbar -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

【讨论】：

【解决方案3】：

对我来说，您的代码运行良好。我认为错误可能出在已加载的脚本中。确保脚本按以下顺序制作。

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

jquery需要先是bootstrap.js..

【讨论】：