bootstrap+wtforms使用時の問題（レベルの表示位置がズレる）

HTML(bootstrap)で書いた入力フォーム＆ラベルと同じ物をbootstrap+wtformsで記述したいのですが、上手くいきません。具体的には以下の様な症状です。ご教示お願い致します。

bootstrapで書いた以下のフォームのコードがあります。

HTML
1<div class="form-group row">
2 <label for="sozai" class="col-sm-3 col-form-label">材料1</label>
3  <div class="col-sm-4">
4  <input type="text" class="form-control", id="sozai">
5  </div>
6</div>
7

次に、同じ内容をwtformsで記載する為に以下のコードを書きました。

HTML
1<div class="form-group row">
2  <label for="sozai" class="col-sm-3 col-form-label">材料1</label>
3    <div class="col-sm-4">
4    {{ form.hidden_tag() }}
5    {{ wtf.form_field(form.sozai, id="sozai", type="input", class="form-control") }}
6    </div>
7   
8</div>

すると、表示結果は以下の様になります。上がwtforms+bootstrapで書いた場合。下がHTML+bootstrapで書いた場合です。分かりにくいですが、微妙にラベル位置が、入力フォームの水平方向に対してずれてしまっています。（下のケースは水平方向ど真ん中ですが、上はラベル位置が少し上にずれています）

以下はコードがブラウザにはき出した内容です。

HTML
1<!-- ここから下がwtformsによる記述 -->
2<div id="sozai_amount_area", class="form-group">
3  <div class="form-group row">
4    <label for="sozai" class="col-sm-1 col-form-label">材料1</label>
5      <div class="col-sm-4">
6       <input id="csrf_token" name="csrf_token" type="hidden" value="xxx">
7
8<!-- ここから下がHTMLでの記述 -->    
9<div class="form-group  required"><label class="control-label" for="sozai"></label>
10        
11<input class="form-control" id="sozai" name="sozai" required type="input" value="">
12 </div>
13  </div>
14    </div>

attakei

2021/06/12 09:08

(直接的な回答にはなってないかもしれないので、追記依頼を兼ねてこちらに記載) wtformsで記載した内容から出力されたHTMLを確認するといいかもしれません。一度、HTML化された状態の後者のコードを貼ってみてください。 +αでなのですが - type属性に差異がある（HTML版ではtextなのがwtforms版ではinput） - HTML版のinputタグ内にカンマがある点がちょっと気になりました。