你能在flask-wtforms中调整问题的宽度吗？
你能在flask-wtforms中调整问题的宽度吗？
提问于 2020-11-13 20:19:36
我有一个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) }}但在移动设备上，它不是那么大，所以我需要减小宽度，并保持其居中，但仅适用于笔记本电脑和电脑。
Stack Overflow用户
回答已采纳
发布于 2020-11-19 07:19:12
使用Bootstrap可以解决您的问题。Bootstrap文档:头您需要将这个样式表链接放在.html文件的https://getbootstrap.com/docs/4.5/getting-started/introduction/元素中。
如果你用类'col-md-6‘包装了一个div，那么它将使用屏幕宽度的一半作为元素。Bootstrap使用网格12段宽，6告诉它使用网格的一半。如果你想让表单更小，可以试试‘col 4’。如果你想要大一点，把它改成‘col md-8’。
让我知道这是如何为你工作的！干杯-Andrew
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64820785
复制相关文章
相似问题
腾讯云开发者
