Django 配合Bootstrap5用if对forloop中的form表单实现单独样式

背景：我们一般在html中是以for循环的形式输出form表单的，比如像下面的html代码，假使form中定义了三个表单。前端用for循环的形式直接显示这三个form。这样就有个问题，每个样式都一模一样，那么如何修改其中某个表单的样式呢？

<form id="formAdd">
    {% for field in form %}
        <div class="mb-3 mt-6">
            <label class="form-label">{{ field.label }}</label>
            {{ field }}
        </div>
    {% endfor %}

效果就是这样，每个字段都是同样的样式，那么比如我只想对其中一个form做修改，就可以用if单独控制。

{% if field.label == '测序公司' %}
<div class="col-1">
    <label class="form-label">{{ field.label }}</label>
    {{ field }}
</div>
{% endif %}

代码如下：

<div class="row">
    <div class="col-12 d-flex">
        {% for field in form %}
        {% if field.label == '测序公司' or field.label == '区域' %}
        <div class="col-1 mb-3 mt-6 me-3">
            <label class="form-label d-flex">{{ field.label }}</label>
            {{ field }}
        </div>
        {% else %}
        <div class="col mb-3 mt-6">
            <label class="form-label">{{ field.label }}</label>
            {{ field }}
        </div>
        {% endif %}
        {% endfor %}
    </div>
    <div class="col col-xs-7 mb-3 mt-6">
        <button id="btnAdd" type="button" class="btn btn-primary btn-lg">添加新数据</button>
    </div>
</div>

我的做法是先设置整个div为class=col-12 d-flex，占全部12个col并且浮动起来。然后循环输出表单时，判断如果是前两个表单，就设置col-1的宽度，如果是第三个就设置为全长col-12.但是这里就出现bug了，在(else)中 col设置col-12，就会超出整个col。如下图。不知道咋解决，只好设置为col自动补全col的长度。