css - 导航栏下拉菜单在 bootstrap4.0 中不起作用

Question

我的导航栏下拉菜单不起作用，我包含了以下样式表和 js 文件

<link href='{%static "/css/bootstrap.min.css"%}' rel="stylesheet">
<link href='{%static "/css/narrow-jumbotron.css"%}' rel="stylesheet">  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="/static/javascript/bootstrap.min.js"></script>

即使在包含这些之后，导航栏下拉菜单也无法正常工作

<nav>
   <ul class="nav nav-pills float-right">
     {% url 'home' as home %}
     {% url 'about' as about %}
     {% url 'about' as contact %}
     <li {% if request.path == home %} class="nav-item active" {% endif %}>
       <a class="nav-link" href="{% url 'home' %}">Home<span class="sr-only">(current)</span></a>
     </li>
     <li {% if request.path == about %}class="nav-item" {% endif %}>
       <a class="nav-link" href="{% url 'about' %}">About</a>
     </li>
     <li {% if request.path == contact %}class="nav-item" {% endif %}>
       <a class="nav-link" href="{% url 'contact' %}">Contact</a>
     </li>
     <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle" href="" id="dropdown01" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Account</a>
       <div class="dropdown-menu" aria-labelledby="dropdown01">
        {% if not request.user.is_authenticated %}
         <a class="dropdown-item" href="{% url 'account_login' %}">Login</a>
         <a class="dropdown-item" href="{% url 'account_signup' %}">SignUp</a>
         <a class="dropdown-item" href="{% url 'account_logout' %}">LogOut</a>
        {% endif %}
       </div>

     </li>

   </ul>
 </nav>

Answer 1

导航栏的 Bootstrap V4 文档页面表明有使导航栏折叠所需的类，我复制了之前发布者的代码，并添加了它们。此代码在 navbar-expand-lg 断点处折叠的导航栏正常工作(您可以使用 -sm、-md 选择不同的断点, -lg, -xl 并且您可以对其进行测试并对您的 nav 代码进行类似的更改以使其适用于 Bootstrap V4。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
  <ul class="navbar-nav mr-auto">
    <li {% if request.path==h ome %} class="nav-item active" {% endif %}>
      <a class="nav-link" href="{% url 'home' %}">Home<span class="sr-only">(current)</span></a>
    </li>
    <li {% if request.path==a bout %}class="nav-item" {% endif %}>
      <a class="nav-link" href="{% url 'about' %}">About</a>
    </li>
    <li {% if request.path==c ontact %}class="nav-item" {% endif %}>
      <a class="nav-link" href="{% url 'contact' %}">Contact</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="" id="dropdown01" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Account</a>
      <div class="dropdown-menu" aria-labelledby="dropdown01">
        <a class="dropdown-item" href="{% url 'account_login' %}">Login</a>
        <a class="dropdown-item" href="{% url 'account_signup' %}">SignUp</a>
        <a class="dropdown-item" href="{% url 'account_logout' %}">LogOut</a>
      </div>

    </li>

  </ul>
  </div>
</nav>