Question

我正在使用bootstrap 4来设置导航栏。单击折叠切换按钮后，我不知道为什么没有反应。里面有些错误吗？

P.S。我正在使用codepen.io编写此代码，但我不认为这是问题所在。

<div>
<nav class="navbar navbar-toggleable-md navbar-light" style="background: coral">
   <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Wenhu's home</a>
  <div class="collapse navbar-collapse justify-content-end" id="nav-content">
    <nav class="navbar-nav">
      <a class="nav-link" href="#">Who am I</a>
      <a class="nav-link" href="#">Past</a>
      <a class="nav-link" href="#">Now</a>
      <a class="nav-link" href="#">Future</a>
      <a class="nav-link" href="#">Contact me</a>
    </nav>
  </div>
</nav>
</div>

Answer 1

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>

<script async src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script async src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<link rel="stylesheet" media="all" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
  
<nav class="navbar navbar-toggleable-md navbar-light bg-faded " style="background: coral">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" style="background: coral">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Wenhu's home</a>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Who am I</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Past</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Now</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Future</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact me</a>
      </li>
     
    </ul>
  </div>
</nav>

＆＃13;

Answer 2

您必须在<script>末尾的<body>标记中加入jquery和javascript 像这样

<body>
    <div>
<nav class="navbar navbar-toggleable-md navbar-light" style="background: coral">
   <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Wenhu's home</a>
  <div class="collapse navbar-collapse justify-content-end">
    <nav class="navbar-nav" id="nav-content">
      <a class="nav-link" href="#">Who am I</a>
      <a class="nav-link" href="#">Past</a>
      <a class="nav-link" href="#">Now</a>
      <a class="nav-link" href="#">Future</a>
      <a class="nav-link" href="#">Contact me</a>
    </nav>
  </div>
</nav>
</div>


<!--here. replace with your bootstrap version-->
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- end -->
 </body>

单击折叠切换按钮后为什么没有反应？

2 个答案: