Flask wtforms 的 CSS答案

【问题标题】：CSS for Flask wtformsFlask wtforms 的 CSS
【发布时间】：2015-08-12 19:30:30
【问题描述】：

我的 Flask 应用程序中使用 Wtforms 的表单有以下代码。我使用 FieldList 将两个字段用于一个部分。

class A(Form)
        additional = FieldList(FormField(Additional), 'Additional', min_entries=1)
        submit = SubmitField('Submit')

class Additional(Form):
        choices = [('Funding Mechanism', 'Funding Mechanism'), ('Study Section Name', 'Study Section Name')]
        critera = SelectField('Additional Criteria', choices=choices)
        input = StringField()

模板使用wtf.quick_form：

{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% block title %}Grants - Find Grant{% endblock %}

{% block page_content %}
<div class="page-header">
    <h1>Specify</h1>
</div>
<div class="col-md-4">
    {{ wtf.quick_form(form) }}
</div>
{% endblock %}

目前表单以压扁和重叠的方式呈现，如下所示：

如何更改代码，使其格式如下所示？这是 Stockholm 的form from his question 中@Niklas 的屏幕截图。

谢谢！

【问题讨论】：

可以显示模板代码吗？
@v1k45 我已编辑以包含模板！谢谢
您是返回表格 A 还是附加表格？我尝试将最基本的 Jinja 模板与 Flask-Bootstrap 一起使用，它似乎对我有用。也许你的 CSS 有问题。
我要返回表格 A @Connie

标签： python css flask wtforms flask-wtforms

【解决方案1】：

由于您的表单类A 将Additional 类调用为FormField 并且仅将submit 添加到该字段，因此我将submit 按钮添加到Additional 表单本身，然后在查看。

在模板中，使用

{{ wtf.quick_form(form, form_type="inline") }}

它输出这样的页面：

form_type 参数将.form-inline 添加到类属性中。

这只是一个 hack，您的表单肯定会比这更多的输入，为此，您将自己编写整个表单模板。

【讨论】：

【解决方案2】：

问题是{{ wtf.quick_form(form) }} 在A 中的FieldList additional 上调用wtf.form_field()，而不是在additional 的子字段上调用它。因此，我认为您将无法在您的特定表单上使用 wtf.quick_form()。

相反，尝试像这样模板化您的表单：

{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% block title %}Grants - Find Grant{% endblock %}

{% block page_content %}
<div class="page-header">
    <h1>Specify</h1>
</div>
<div class="col-md-4">
    <form class="form form-horizontal" method="post" role="form">
        {{ form.hidden_tag() }}
        {{ wtf.form_errors(form, hiddens="only") }}

        {% for subfield in form.additional %}
            {{ wtf.form_field(subfield) }}
        {% endfor %}
        {{ wtf.form_field(form.submit) }}
    </form>
</div>
{% endblock %}

您可以在 Flask-Bootstrap documentation 网站上阅读有关 wtf.form_field() 的更多信息。

【讨论】：