背景：我們一般在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">添加新數(shù)據(jù)</button>
</div>
</div>
我的做法是先設(shè)置整個div為class=col-12 d-flex栅表，占全部12個col并且浮動起來笋鄙。然后循環(huán)輸出表單時，判斷如果是前兩個表單怪瓶，就設(shè)置col-1的寬度萧落，如果是第三個就設(shè)置為全長col-12.但是這里就出現(xiàn)bug了，在(else)中 col設(shè)置col-12洗贰，就會超出整個col铐尚。如下圖。不知道咋解決哆姻，只好設(shè)置為col自動補全col的長度宣增。
誰有更好的方法可以留言！
