你能调整一个问题的宽度吗？

2024-04-25 02:12:57 发布

您现在位置：Python中文网/ 问答频道 /正文
5404 3

我有一个表格，它非常宽： enter image description here

我想减少患者吸烟和年龄问题的宽度。 这是我正在使用的表单代码：

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

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


Tags： no代码form患者表单宽度smokeclass
3条回答
网友
1楼 · 编辑于 2024-04-25 02:12:57

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

如果在表单周围用类“col-md-6”包装一个div，那么它将使用屏幕宽度的一半作为元素。引导使用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>
网友
2楼 · 编辑于 2024-04-25 02:12:57

可以使用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'},
)
网友
3楼 · 编辑于 2024-04-25 02:12:57

我从未在html中使用过wtf.quick_form，但在调整表单大小时，我使用了这种语法：

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

相关问题 更多 >

    编程相关推荐