使用 Django-Crispy-Forms 的 Django-Allauth 样式登录表单
Style Login Form of Django-Allauth using Django-Crispy-Forms
我正在使用 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 }}
不是 "inline" 与 {{ field }}
。有没有一种简单的方法可以使它们内联,同时仍然使用 django-crispy-form 或类似的东西来修饰外观?
我也想学习如何隐藏显示的{{ field.label }}
。我唯一能想到的就是循环遍历表单的字段,并在下面的答案中注释掉标签显示。
Django Forms and Bootstrap - CSS classes and <divs>
是的,您可以使标签与其相关字段内联。使用自定义 css 重写 bootstrap.css
。具体来说,需要让div.controls
,包含input
和错误信息,显示为inline-block
:
div.controls{
display: inline-block;
}
根据您当前的页面样式,您希望在页面上呈现哪些内容(字段、标签、错误消息等)以及它的外观(例如,是否在包含错误消息的行中) ,您可能还需要更改 input.form-control
的宽度和显示属性以及错误消息。
为了隐藏标签,在 forms.py 中将其设置为空:
somefield = forms.CharField(label='', ...)
这将使标签消失。
我找到了 django-widget-tweak 包,它可以更好地控制 django 表单中的每个字段。
我正在使用 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 }}
不是 "inline" 与 {{ field }}
。有没有一种简单的方法可以使它们内联,同时仍然使用 django-crispy-form 或类似的东西来修饰外观?
我也想学习如何隐藏显示的{{ field.label }}
。我唯一能想到的就是循环遍历表单的字段,并在下面的答案中注释掉标签显示。
Django Forms and Bootstrap - CSS classes and <divs>
是的,您可以使标签与其相关字段内联。使用自定义 css 重写 bootstrap.css
。具体来说,需要让div.controls
,包含input
和错误信息,显示为inline-block
:
div.controls{
display: inline-block;
}
根据您当前的页面样式,您希望在页面上呈现哪些内容(字段、标签、错误消息等)以及它的外观(例如,是否在包含错误消息的行中) ,您可能还需要更改 input.form-control
的宽度和显示属性以及错误消息。
为了隐藏标签,在 forms.py 中将其设置为空:
somefield = forms.CharField(label='', ...)
这将使标签消失。
我找到了 django-widget-tweak 包,它可以更好地控制 django 表单中的每个字段。