Question

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

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

谢谢，我希望有人可以帮助我！

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

以这种方式试试..

Answer 2

以下是一个工作代码段检查，我添加了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>

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

Navbar崩溃无法正常工作

3 个答案: