首页 > flask中使用bootstrap/wtf.html模板编写表单,要怎样调整表单大小?

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

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


你用的是 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 也会自己调整。


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


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

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

在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))
【热门文章】
【热门文章】