你可以在flask-wtforms中调整问题的宽度吗？答案

【问题标题】：Can you adjust the width of a question in flask-wtforms?你可以在flask-wtforms中调整问题的宽度吗？
【发布时间】：2020-11-13 12:19:35
【问题描述】：

我在 flask-wtforms 中有一个表格，它非常宽：

我想缩小患者是否吸烟和年龄问题的宽度。这是我正在使用的 flask-wtforms 代码：

class UploadForm(FlaskForm):
    upload = FileField('Select an image:', validators=[
        FileRequired(),
        FileAllowed(['jpg', 'png', 'jpeg', 'JPEG', 'PNG', 'JPG'], 'Images only!')
    ])

    smoke = SelectField(
        'Does the patient smoke?',
        choices=[('Yes', 'Yes'), ('No', 'No')]
    )

    name = StringField('Age')

    submit = SubmitField('Get Results')

在 HTML 中：

{{ wtf.quick_form(form) }}

但在移动设备上它并没有那么大，所以我需要减小宽度并仍然保持居中，但仅适用于笔记本电脑和计算机。

【问题讨论】：

标签： python flask wtforms

【解决方案1】：

您可以使用 render_kw 将样式直接添加到字段中，例如：

smoke = SelectField(
    'Does the patient smoke?',
    choices=[('Yes', 'Yes'), ('No', 'No')],
    render_kw={'style': 'width: 10ch'},
)

name = StringField(
    'Age',
    render_kw={'style': 'width: 7ch'},
)

【讨论】：

【解决方案2】：

使用 Bootstrap 可以解决您的问题。引导文档：https://getbootstrap.com/docs/4.5/getting-started/introduction/ 您需要将此样式表链接放在 .html 文件的 head 元素中。

如果你在你的表单周围包裹了一个类 'col-md-6' 的 div，那么它将使用屏幕宽度的一半作为元素。 Bootstrap 使用 12 段宽的网格，6 告诉它使用一半的网格。如果您希望表单更小，请尝试“col-md-4”。如果你想让它大一点，把它改成 'col-md-8'。

让我知道这对你有什么作用！干杯-安德鲁

<head>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>

<div class="col-md-6">
     {{ wtf.quick_form(form) }}
</div>

【讨论】：

我的回答对你有帮助吗？

【解决方案3】：

我从来没有在我的 html 中使用过wtf.quick_form，但是当我调整表单大小时，我会使用这种语法：

{{ form.smoke(size=17) }}
{{ form.name(size=17) }}

【讨论】：