你能在 flask-wtforms 中调整问题的宽度吗？

Question

我在 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) }}

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

Answer 1

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

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

Answer 2

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

如果您将 div 和 class 'col-md-6' 包裹在您的表单周围，那么它将使用屏幕宽度的一半作为元素。 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>

Answer 3

您可以使用 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'},
)

你能在 flask-wtforms 中调整问题的宽度吗？

Can you adjust the width of a question in flask-wtforms?

python

flask

wtforms