时间戳

首页 > 解决方案 > 如何在 Django 中创建一个下拉菜单，如下所示？

html - 如何在 Django 中创建一个下拉菜单，如下所示？

问题描述

我正在按照 Django for Beginners 书中的说明进行操作。我目前在第 13 章，试图创建我的主页以在右上角有一个下拉导航栏，在左上角有一个带有创建新文章按钮的日志。但是，我的代码最终将创建新文章按钮和下拉栏都放在了右侧。此外，当我单击下拉栏时，它没有显示预期的选项。

这是使用 Django 2.x 编写的。

这是我的代码：

 <a class="navbar-brand" href="{% url 'home' %}">Newspaper</a>
 <button class="navbar-toggler" type="button" data-toggle="collapse"
 data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false"
 aria-label="Toggle navigation">
   <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
 {% if user.is_authenticated %}
   <ul class="navbar-nav ml-auto">
   <ul class="navbar-nav mr-auto">
       <li class="nav-item"><a href="{% url 'article_new' %}">+ New</a></li>
   </ul>
     <li class="nav-item">
       <a class="nav-link dropdown-toggle" href="#" id="userMenu"
       data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         {{ user.username }}
       </a>
       <div class="dropdown-menu dropdown-menu-right"
       aria-labelledby="userMenu">
         <a class="dropdown-item" href="{% url 'password_change' %}">Change password</a>
       <div class="dropdown-divider"></div>
       <a class="dropdown-item" href="{% url 'logout' %}">Log out</a>
       </div>
     </li>
   </ul>
 {% else %}
   <form class="form-inline ml-auto">
     <a href="{% url 'login' %}" class="btn btn-outline-secondary">Log in</a>
 <a href="{% url 'signup' %}" class="btn btn-primary ml-2 ">Sign up</a>
   </form>
 {% endif %}
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse"
 aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>```

Here are the expected results:
 ![Expected](https://i.imgur.com/O92rHIH.png)
 ![Expected1](https://i.imgur.com/teyrG00.png)
Here's what I generated:
 ![Actual](https://i.imgur.com/wZ7JlXw.png)

标签： htmldjangopython-3.xbootstrap-4

解决方案

推荐阅读