Flask wtforms 的 CSS

Question

我在我的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 %}

当前表格渲染方式很挤，重叠在一起像这样：。如何更改代码使表格像下面这张@Niklas在斯德哥尔摩的问题中的截图一样格式化成一行呢？谢谢！

- jk0104

---

你能展示一下模板代码吗？ - v1k45

@v1k45 我已经编辑过了，包括模板！谢谢。 - jk0104

你是从A还是Additional返回的？我尝试使用最基本的Jinja模板和Flask-Bootstrap，对我来说似乎可以工作。也许你的CSS有问题。 - Connie

我正在从 A 返回 @Connie - jk0104

迁移到 https://github.com/helloflask/bootstrap-flask - Vladimir Osinskiy

Answer 1

由于你的表单类A将类Additional作为一个FormField进行调用，并且只向该字段添加了submit，因此我在Additional表单本身中添加了submit按钮，然后在视图中调用它。

在模板中使用：

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

它以这样的方式输出页面： form_type参数会将.form-inline添加到类属性中。

这只是一个hack，毫无疑问，你的表单会有更多的输入，为此，你需要自己编写整个表单模板。

- v1k45

Answer 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的文档网站上阅读更多关于wtf.form_field()的内容。

- Connie