Django注销按钮引导程序导航栏

时间:2019-11-21 17:47:44

标签: django bootstrap-4

我想在我的引导导航栏中添加一个注销按钮,但是它看起来不正确。

{# template.html #}

<nav class="navbar navbar-light">
  <div class="container">
    <div class="navbar-expand">
      <ul class="navbar-nav mr-auto">
        {% if user.is_authenticated %}
        <li class="nav-item">
          <a href="#" class="nav-link">{{ user.get_username }}</a>
        </li>
        <form class="form-inline nav-item" action="{% url 'account_logout' %}" method="POST">
          {% csrf_token %}
          <button type="submit" class="btn btn-info">Log out</button>
        </form>
        {% else %}
        <li class="nav-item">
          <a class="nav-link" href="{% url 'account_login' %}">Log in</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{% url 'account_signup' %}">Sign up</a>
        </li>
        {% endif %}
      </ul>
    </div>
  </div>
</nav>

是否可以使按钮看起来像引导程序nav-link?如果没有,如何使它成为可发布到Django注销端点的锚点?

screenshot

2 个答案:

答案 0 :(得分:1)

这应该有效`

<li class="nav-item">
  <a class="nav-link" href="#" 
    onClick="document.getElementById('logoutform').submit()">
    Logout
  </a>
</li>
<form id="logoutform" method="POST" action="{% url 'account_logout' %}">
  {% csrf_token %}
  <input type="hidden">
</form>

答案 1 :(得分:0)

您不需要表格。只需用以下内容替换表格:

<a href="{% url 'account_logout' %}" class="nav-link">Logout</a>