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

尝试按以下顺序添加脚本。

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

如果不添加popper.js，我就无法进行下拉列表。我仍在努力了解更多相关信息。因为在常规的Bootstrap中从来就不是这样。

<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>
  <ul class="nav nav-pills float-right">
    <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>
</nav>

Answer 2

导航栏的Bootstrap V4文档页面表明有必要的类使导航栏崩溃，我复制了上一张海报的代码，并添加了它们。此代码在导航栏在navbar-expand-lg断点处折叠时正常工作（您可以使用-sm，-md，-lg，-xl选择不同的断点，您可以测试它并对您的nav代码进行类似的更改，使其适用于Bootstrap V4。

＆＃13;

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

＆＃13;

navbar下拉列表在bootstrap4.0中无效

2 个答案: