html - 使用 Django-Crispy-Forms 的 Django-Allauth 样式登录表单

Question

我正在使用 django-crispy-forms 来设置 django-allauth login.html 的登录表单的样式

  <form class="login" method="POST" action="{% url 'account_login' %}">
    {% csrf_token %}
    {{ form|crispy }}
    {% if redirect_field_value %}
    <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
    {% endif %}
    <a class="button secondaryAction" href="{% url 'account_reset_password' %}">{% trans "Forgot Password?" %}</a>
    <button class="primaryAction" type="submit">{% trans "Sign In" %}</button>
  </form>

但是，表单 {{ field.label }} 不是与 {{ field }}“内联”的。有没有一种简单的方法可以使它们内联，同时仍然使用 django-crispy-form 或类似的东西来修饰外观？

我还想学习如何隐藏显示的{{ field.label }}。我唯一能想到的就是循环遍历表单的字段，并在以下答案中注释掉标签显示。

Django Forms and Bootstrap - CSS classes and <divs>

Answer 1

是的，您可以使标签与它们相关的字段内联。使用自定义 css 重写 bootstrap.css。更具体地说，您需要制作包含输入和错误消息的div.controls，显示为inline-block:

div.controls{
    display: inline-block;
}

根据您当前的页面样式、您要在页面上呈现的内容(字段、标签、错误消息等)以及它的外观(例如，是否在包含错误消息的行中)，您可能还需要更改 input.form-control 的宽度和显示属性以及错误消息。

为了隐藏标签，在 forms.py 中将其设置为空:

somefield = forms.CharField(label='', ...)

这将使标签消失。