背景：我們一般在html中是以for循環(huán)的形式輸出form表單的，比如像下面的html代碼，假使form中定義了三個表單。前端用for循環(huán)的形式直接顯示這三個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 == '區(qū)域' %}
        <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并且浮動起來。然后循環(huán)輸出表單時，判斷如果是前兩個表單，就設置col-1的寬度，如果是第三個就設置為全長col-12.但是這里就出現bug了，在(else)中 col設置col-12，就會超出整個col。如下圖。不知道咋解決，只好設置為col自動補全col的長度。