如何在Bootstrap-Flask的render_form()中控制输入框尺寸？

当然有办法，下面是几种实用方案，既能保留render_form()的便捷性，又能精准控制输入框尺寸：

1. 在表单类中通过render_kw定义（后端统一控制） #

直接在Flask-WTF表单类的字段定义里，用render_kw参数传入尺寸相关的属性或Bootstrap样式类，render_form()会自动继承这些设置：

from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField

class LoginForm(FlaskForm):
    # 用Bootstrap内置尺寸类控制（form-control-sm为小尺寸，form-control-lg为大尺寸）
    email = StringField('Email', render_kw={'class': 'form-control form-control-lg'})
    # 直接设置width样式，或原生size属性
    password = PasswordField('Password', render_kw={'style': 'width: 300px;', 'size': 30})
    submit = SubmitField('Log In')

模板里只需保留{{ render_form(form) }}，输入框尺寸就会按定义生效。

2. 在模板调用render_form()时传入field_args（模板端灵活调整） #

如果不想修改表单类，也可以在模板里通过field_args参数，针对单个字段单独设置：

{% extends "base.html" %}
{% from 'bootstrap5/form.html' import render_form %}
{% block title %}Login{% endblock %}
{% block content %}
    <div class="container">
    <h1>Login</h1>
        {{ render_form(form, field_args={
            'email': {'class': 'form-control form-control-sm'},
            'password': {'style': 'max-width: 250px;'}
        }) }}
    </div>
{% endblock %}

3. 自定义CSS全局控制（批量调整） #

如果需要统一调整全站表单输入框的尺寸，可以在自定义CSS中覆盖Bootstrap默认样式：

/* 自定义CSS文件中 */
.form-control {
    max-width: 300px;
    width: 100%;
}

将该CSS文件引入模板的base.html即可，适合全站表单风格统一的场景。

内容的提问来源于stack exchange，提问作者rishabh jain