在 Flask WTForms 中控制 BootStrap 表单的样式

Question

我有一个表格，其中有 14 个问题，每个问题有 4 个选项，1 个正确答案，以及一个必须在页面上呈现的计时器字段，如下所示：

Expected form format

帮助我理解和使用 WTFroms 以及引导程序，使我的表单看起来像这样：

目前是这样的：

Current form format

forms.py 的代码：

class XMLQuestionForm(FlaskForm):
    question = FieldList(StringField('Question', validators=[DataRequired(), Length(max=395)]), min_entries=14, max_entries=14 )
    optionA = FieldList(StringField('Option A', validators=[DataRequired(), Length(max=85)]), min_entries=14, max_entries=14)
    optionB = FieldList(StringField('Option B', validators=[DataRequired(), Length(max=85)]), min_entries=14, max_entries=14)
    optionC = FieldList(StringField('Option C', validators=[DataRequired(), Length(max=85)]), min_entries=14, max_entries=14)
    optionD = FieldList(StringField('Option D', validators=[DataRequired(), Length(max=85)]), min_entries=14, max_entries=14)
    
    answer = FieldList(SelectField('Answer', validators=[DataRequired()], choices=[(None,'<Select an answer>'),('Option A','Option A'),('Option B','Option B'),('Option C','Option C'),('Option D','Option D')]), min_entries=14, max_entries=14)
    timer = FieldList(IntegerField('Timer', default=60),  min_entries=14, max_entries=14)

    submit = SubmitField('Generate XML')

home.html 的代码

{% extends "layout.html" %}
{% block content %}
    <div class="content-section">
        <form method="POST" action="">
            {{ form.hidden_tag() }}
            <fieldset class="form-group">
                <legend class="border-bottom mb-4">KBC Question XML Creator</legend>
                {% for n in range(14) %}
                    <!-- Question -->
                    {% if form.question[n].errors %}
                        {{ form.question[n](class="form-control form-control-lg is-invalid") }}
                        <div class="invalid-feedback">
                        {% for error in form.username[n].errors %}
                            <span>{{ error }}</span>
                        {% endfor %}
                        </div>
                    {% else %}
                        {{ form.question[n].label }} {{ loop.index }} {{ form.question[n](class="form-control form-control-lg") }} 
                    {% endif %}

                    <!-- Options -->
                    {% if form.optionA[n].errors %}
                        {{ form.optionA[n](class="form-control  is-invalid") }}
                        <div class="invalid-feedback">
                        {% for error in form.optionA[n].errors %}
                            <span>{{ error }}</span>
                        {% endfor %}
                        </div>
                    {% else %}
                        {{ form.optionA[n].label }} {{ form.optionA[n](class="form-control col-sm-2") }} 
                    {% endif %}

                    {% if form.optionB[n].errors %}
                        {{ form.optionB[n](class="form-control  is-invalid") }}
                        <div class="invalid-feedback">
                        {% for error in form.optionB[n].errors %}
                            <span>{{ error }}</span>
                        {% endfor %}
                        </div>
                    {% else %}
                        {{ form.optionB[n].label }} {{ form.optionB[n](class="form-control col-sm-2") }} 
                    {% endif %}

                    {% if form.optionC[n].errors %}
                        {{ form.optionC[n](class="form-control  is-invalid") }}
                        <div class="invalid-feedback">
                        {% for error in form.optionC[n].errors %}
                            <span>{{ error }}</span>
                        {% endfor %}
                        </div>
                    {% else %}
                        {{ form.optionC[n].label }}  {{ form.optionC[n](class="form-control col-sm-2") }} 
                    {% endif %}

                    {% if form.optionD[n].errors %}
                        {{ form.optionD[n](class="form-control  is-invalid") }}
                        <div class="invalid-feedback">
                        {% for error in form.optionD[n].errors %}
                            <span>{{ error }}</span>
                        {% endfor %}
                        </div>
                    {% else %}                        
                        {{ form.optionD[n].label }} {{ form.optionD[n](class="form-control col-sm-2") }}                         
                    {% endif %}

                    <!-- Answer -->
                    {% if form.answer[n].errors %}
                        {{ form.answer[n](class="form-control form-control-lg is-invalid") }}
                        <div class="invalid-feedback">
                        {% for error in form.answer[n].errors %}
                            <span>{{ error }}</span>
                        {% endfor %}
                        </div>
                    {% else %}
                        {{ form.answer[n].label }} {{ form.answer[n](class="form-control col-sm-4") }} 
                    {% endif %}

                    <!-- Timer -->
                    {% if form.timer[n].errors %}
                        {{ form.timer[n](class="form-control form-control-lg is-invalid") }}
                        <div class="invalid-feedback">
                        {% for error in form.timer[n].errors %}
                            <span>{{ error }}</span>
                        {% endfor %}
                        </div>
                    {% else %}
                        {{ form.timer[n].label }} {{ form.timer[n](class="form-control col-sm-4") }} 
                    {% endif %}
                    <hr>
                {% endfor %}                    
            </fieldset>
            <div class="form-group">
                {{ form.submit(class="btn btn-outline-info") }}
            </div>
        </form>
    </div>
{% endblock content %}

Answer 1

Bootstrap 的网格系统基于 12 列系统工作。 因此，例如，如果您有 2 个元素要显示在同一行中，并为两者提供相等的空间，那么您将为每个元素提供 6 列，每列。 例如->

<div class="row>
    <h1 class="col-md-6">Hello</h1>
    <h1 class="col-md-6">World</h1>
</div>

在您需要拆分 8 个部分（4 个答案标签和 4 个表单框）的情况下，它变得有点复杂。 一旦你给一个 DIV 一个固定数量的列，在那个 div 里面，你仍然基于 12 列系统来分配它，即使 12 列实际上不可用。

让我们看看我在下面发送给您的解决方案中是如何解决它的。 我开始将一半的元素嵌套在一个具有“col-md-6 行”类的 div 中 和另一半一样。 现在，当我们查看其中一个部分时，当我们嵌套在其中时，我们再次根据 12 个网格系统分布这 6 个列。 因此，例如，我可以给 4 个元素中的每一个元素 3 个，即 class="col-md-3"。 但是由于您似乎希望表单字段比文本字段大一点，所以我为表单字段使用“col-md-4”，为文本字段使用“col-md-2”。

这是我的解决方案的样子 -> https://imgur.com/gallery/ylMWjFN

我不得不拼凑一个完整的应用程序来解决这个问题，所以如果你想查看那里的代码，我继续把它扔到 github 上 -> https://github.com/CraftyClark/ontrolling-the-styling-of-bootstrap-form-in-flask-wtforms/tree/main/application

干杯，

{% extends "layout.html" %}
{% block content %}
    <div class="content-section">
        <form method="POST" action="">
            {{ form.hidden_tag() }}
            <fieldset class="form-group">
                <legend class="border-bottom mb-4">KBC Question XML Creator</legend>
                {% for n in range(14) %}
                    <div class="row col-md-10"> 
                        <!-- Question -->
                        {% if form.question[n].errors %}
                            {{ form.question[n](class="form-control form-control-lg is-invalid") }}
                            <div class="invalid-feedback">
                            {% for error in form.username[n].errors %}
                                <span>{{ error }}</span>
                            {% endfor %}
                            </div>
                        {% else %}
                            {{ form.question[n].label }} {{ loop.index }} {{ form.question[n](class="form-control form-control-lg") }} 
                        {% endif %}
                    </div>
                    <br>

                    <!-- start of options row -->
                    <div class="row"> 
                        <!-- Options -->
                        <div class="col-md-6 row">
                            {% if form.optionA[n].errors %}
                                {{ form.optionA[n](class="form-control is-invalid") }}
                                <div class="invalid-feedback">
                                {% for error in form.optionA[n].errors %}
                                    <span>{{ error }}</span>
                                {% endfor %}
                                </div>
                            {% else %}
                                <div class="form-group col-md-2">
                                    {{ form.optionA[n].label(class="form-control-label") }}
                                </div>
                                <div class="form-group col-md-4">
                                    {{ form.optionA[n](class="form-control form-control-lg") }}
                                </div>
                            {% endif %}

                    
                            {% if form.optionB[n].errors %}
                                {{ form.optionB[n](class="form-control  is-invalid") }}
                                <div class="invalid-feedback">
                                {% for error in form.optionB[n].errors %}
                                    <span>{{ error }}</span>
                                {% endfor %}
                                </div>
                            {% else %}
                                <div class="form-group col-md-2">
                                    {{ form.optionB[n].label(class="form-control-label") }}
                                </div>
                                <div class="form-group col-md-4">
                                    {{ form.optionB[n](class="form-control form-control-lg") }}
                                </div>
                            {% endif %}
                        </div>
                        

                        <div class="col-md-6 row">
                            {% if form.optionC[n].errors %}
                                {{ form.optionC[n](class="form-control  is-invalid") }}
                                <div class="invalid-feedback">
                                {% for error in form.optionC[n].errors %}
                                    <span>{{ error }}</span>
                                {% endfor %}
                                </div>
                            {% else %}
                                <div class="form-group col-md-2">
                                    {{ form.optionC[n].label(class="form-control-label") }}
                                </div>
                                <div class="form-group col-md-4">
                                    {{ form.optionC[n](class="form-control form-control-lg") }}
                                </div>
                            {% endif %}
                        

                    
                            {% if form.optionD[n].errors %}
                                {{ form.optionD[n](class="form-control  is-invalid") }}
                                <div class="invalid-feedback">
                                {% for error in form.optionD[n].errors %}
                                    <span>{{ error }}</span>
                                {% endfor %}
                                </div>
                            {% else %}                        
                                <div class="form-group col-md-2">
                                    {{ form.optionD[n].label(class="form-control-label") }}
                                </div>
                                <div class="form-group col-md-4">
                                    {{ form.optionD[n](class="form-control form-control-lg") }}
                                </div>                       
                            {% endif %}
                        </div>
                  
                    </div>
                    <!-- end of options row -->


                    <!-- Answer -->
                    {% if form.answer[n].errors %}
                        {{ form.answer[n](class="form-control form-control-lg is-invalid") }}
                        <div class="invalid-feedback">
                        {% for error in form.answer[n].errors %}
                            <span>{{ error }}</span>
                        {% endfor %}
                        </div>
                    {% else %}
                        {{ form.answer[n].label }} {{ form.answer[n](class="form-control col-sm-4") }} 
                    {% endif %}

                    <!-- Timer -->
                    {% if form.timer[n].errors %}
                        {{ form.timer[n](class="form-control form-control-lg is-invalid") }}
                        <div class="invalid-feedback">
                        {% for error in form.timer[n].errors %}
                            <span>{{ error }}</span>
                        {% endfor %}
                        </div>
                    {% else %}
                        {{ form.timer[n].label }} {{ form.timer[n](class="form-control col-sm-4") }} 
                    {% endif %}
                    <hr>
                {% endfor %}                    
            </fieldset>
            <div class="form-group">
                {{ form.submit(class="btn btn-outline-info") }}
            </div>
        </form>
    </div>
{% endblock content %}