在Flask中如何自定义TextAreaField的rows和cols且将表单渲染为bootstrap的样式?

Question

flask-bootstrap提供了quick_form()这个方法用来快速渲染表单的样式.但是它无法指定rows和cols.

forms.py

class PostArticle(Form):
    title = StringField('标题', validators=[Required()])
    body = TextAreaField('正文', validators=[Required()])
    submit = SubmitField('发表')

postarticle.html

...
<div class="container">
    {{ wtf.quick_form(form) }}
</div>
...

这样就导致了下图结果:(正文部分的textarea太小,看上去很不爽).

然后我试着这么做:

postarticle.html

<div class="container">
<form method="POST">
    {{ form.hidden_tag() }}
    {{ form.title.label }}
    <div class='form-group'>
    {{ form.title }}
    </div>
    {{ form.body.label }}
    <div class='form-group'>
    {{ form.body(cols=50,rows=20) }}
    </div>
    <button type="button" class="btn btn-default">{{ form.submit }}</button>
</form>
</div>

结果是这样的:

问: 如何指定rows和cols值,且让它渲染为bootstrap的样式?先谢谢大家.

Answer 1

你可以为元素指定类或者设置样式:

{{ form.body(cols=50, rows=20, class='xxx', style='background:#ccc;') }}

默认情况下, 表单是有默认样式的, 可能你没引入相关的CSS文件吧. 行数和列数你根据实际情况再调整一下吧, 提交按钮重复了, 都嵌进去了.