9 Django Crispy Form

Django-crispy-forms能够帮忙我们快速的优化form显示

http://django-crispy-forms.readthedocs.io/en/latest/

安装

pip install django-crispy-forms

在settings里，将crispy_forms添加到INSTALLED_APP，同时添加配置参数CRISPY_TEMPLATE_PACK = 'bootstrap3'，因为目前我们用的bootstrap版本就是3.3

在post_form.html，首先加载标签{% load crispy_forms_tags %}，然后渲染form的地方修改为{{form|crispy}} 这时候可以看到form的样式已经变得非常优美，但是有个问题是content编辑器有缩进，查看HTML代码可以看到主要是下面css影响了，在前后都有25%的缩进

.wmd-panel {
    margin-left: 25%;
    margin-right: 25%;
    width: 50%;
    min-width: 500px;
}

修改css，在base.css去掉这两个margin

.wmd-panel {
    margin-left: 0px;
    margin-right: 0px;
}

但是查看效果，并没有生效，检查css样式，这个css没起作用

检查base.html和post_form.html

<link rel="stylesheet" type="text/css" href="{% static 'css/base.css' %}">

{% block head_extra %}
{% endblock %}

{% block head_extra %}
{{form.media}}
{% endblock %}

Form.media会在页面内渲染这个css，所以需要提供base.css里面的优先级，添加!important即可起作用。

执行python manage.py collectstatic将base.css包括到静态文件cdn