控制表单中引导表单的样式

Question

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

Expected form format

帮助我理解和使用WTFROM以及引导，使我的表单如下所示：

目前，情况是这样的：

Current form format

{}的代码：

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列系统工作。 例如，如果有两个元素要显示在同一行中，并且两个元素都有相等的空间，那么每个元素都有6列。 e、 g.->

<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列实际上不可用

让我们看看我在下面发给你的解决方案中是如何解决的。 我首先将嵌套的一半元素放在一个div中，类为“col-md-6 row” 另一半也一样。 现在，当我们在其中的一部分中查看时，当我们在其中嵌套时，我们再次基于12网格系统分布这6列。 例如，我可以给4个元素中的每个元素3个，^{cl1}$

以下是我这边的解决方案->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 %}