Css 导航栏下拉菜单在bootstrap4.0中不工作

我的导航栏下拉菜单不起作用，我已经包括了以下样式表和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>

{%url“home”作为home%}
{%url'about'作为about%}
{%url'about'作为联系人%}







{%if not request.user.is_authenticated%}
{%endif%}

尝试按以下顺序添加脚本

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

---

navbar的Bootstrap V4 docs页面表明有必要的类使navbar崩溃，我复制了前面的海报代码，并添加了它们。当导航栏在

导航栏展开lg

断点处折叠时，此代码工作正常（您可以使用

-sm

、

-md

、

-lg

、

-xl

选择不同的断点，您可以对其进行测试并对

导航

代码进行类似的更改，使其在引导V4中工作

bootstrap.js v4还需要一些其他lib，比如

popper.js

-查看这个lib？检查浏览器控制台，看看是否有错误。在bootstrap网站上，他们提供了popper.js的链接"

并在引导之前加载它。js@KenH.它仍然不起作用。当我查看有关导航栏的Bootstrap 4文档时，似乎有一些您没有的要求。似乎您有一个Bootstrap 3老式导航栏？查看Bootstrap 4文档，看看需要什么，这应该会有所帮助。@KenH。这是我的s组件实际上在Nav下。请参阅文档。您对依赖项的原始注释很可能就是解决方案。与Bootstrap V3相比，Bootstrap 4中有许多更改-这就是其中之一。我认为问题中发布的原始代码看起来像是一个导航条，它是Bootstrap V3样式。请查看Bootstrap迁移文档获取更多信息。谢谢，它可以工作。但是我想知道为什么代码对于

我试图通过包括的附加特性来遵循这个示例dropdown@pavikirthi-与V3相比，Bootstrap V4有很多变化-因此，为了获得可折叠的导航栏，有新的类使其工作，以及

popper.js

。最好从文档中的示例开始在第页上，查看它们是如何工作的（让它们在您的环境中工作），然后根据需要进行修改。如果希望元素向右移动，则必须有不同的类。导航栏现在正在使用flex，如果有类（或者您可以定义一个类）若要获取

justify content:flex end；

，它将把链接放在右边要在导航栏上放置该属性以将链接移到右边的类是

justify content end

，这实质上是将CSS属性

justify content:flex end！important；

放在元素上。@pavikirthi-如果要对齐这些属性向右。