flask中使用bootstrap/wtf.html模板编写表单，要怎样调整表单大小？

Question

例如这个表单，使用继承bootstrap/wtf.html来写的，现在想调整这个大小要怎么调整？

Answer 1

你用的是 https://github.com/mbr/flask-bootstrap 吧？我没用过这个，另外其实我连 wtf 也很少用，都是生写的。

我看了一下 https://github.com/mbr/flask-bootstrap 的文档，只有在水平 form 时才可以指定（也必须指定）宽度，你这个场景下，它是不支持的。

不过 wtforms 本身是支持给字段添加 class 的，你找 bootstrap 的那些 class 添加就好了，比如什么 input-lg 之类的。比如

<div>{{ form.username.label }}: {{ form.username(class="input-lg") }}</div>

以及

form.field(class_="input-lg")

另外你也可以不给具体字段指定宽度，给它的外层 div 指定一个宽度（用 bootstrap 的 col* 类 class），这样 bootstrap 也会自己调整。

Answer 2

可以通过设置控件的height，line-height，padding和font-size等属性来实现控件的高度设置。
不过Bootstrap框架还提供了两个不同的类名，用来控制表单控件的高度。这两个类名是：
1、input-sm:让控件比正常大小更小
2、input-lg:让控件比正常大小更大

Answer 3

Form表单里面可以设置id属性，例如content = TextAreaField('代码', validators=[DataRequired()], id='contentcode')，这样在Html页面直接用css控制就可以了：

{% block head %}
    {{ super() }}
    <style type="text/css">
        #contentcode {
            height: 444px;
        }
    </style>
{% endblock %}

Answer 4

在Stack Overflow看到的一个方法，自己定义一个TextArea：

from wtforms.widgets.core import TextArea
class MyTextArea(TextArea):
    def __init__(self,**kwargs):
        self.kwargs = kwargs

    def __call__(self, field, **kwargs):
        for arg in self.kwargs:
            if arg not in kwargs:
                kwargs[arg] = self.kwargs[arg]
        return super(MyTextArea,self).__call__(field,**kwargs)

然后创建表单的时候，就可以指定高度了

class ChangeRes(Form):
    changes = TextAreaField('物品列表', widget=MyTextArea(rows=10, cols=10))