Html 如何防止内联复选框的复选框文本标签重叠？

我编写了以下表单，其中包含多个内联的

复选框

<form>
    <div class="form-row">
        <div class="form-group form-check">
            <label for="banana" class="form-check-label checkbox-inline">
              <input type="checkbox" id="banana" class="form-check-input" [ngClass]="{ 'is-invalid': submitted && f.acceptTerms.errors }" />
               Bananas
            </label>
    
            <label for="Pineapples" class="form-check-label">
            <input type="checkbox" id="Pineapples" class="form-check-input" [ngClass]="{ 'is-invalid': submitted && f.acceptTerms.errors }" />
            Pineapples</label>
           
            <label for="Woodapple" class="form-check-label">
            <input type="checkbox" id="Woodapple" class="form-check-input" [ngClass]="{ 'is-invalid': submitted && f.acceptTerms.errors }" />
            Woodapple</label>
           
            <label for="Berries" class="form-check-label">
            <input type="checkbox" id="Berries" class="form-check-input" [ngClass]="{ 'is-invalid': submitted && f.acceptTerms.errors }" />
            Berries</label>
        </div>
    </div>
</form>

结果

---

您可以使用下面的节标记

链接=>

<form>
    <div class="form-row">
        <div class="form-group form-check">
             <section>
          <label for="banana" class="form-check-label checkbox-inline">
                      <input type="checkbox" id="banana" class="form-check-input"/>
                      Bananas
                    </label>

          <label for="Pineapples" class="form-check-label">
                    <input type="checkbox" id="Pineapples" class="form-check-input"/>
                    Pineapples</label>

          <label for="Woodapple" class="form-check-label">
                    <input type="checkbox" id="Woodapple" class="form-check-input" />
                    Woodapple</label>

          <label for="Berries" class="form-check-label">
                    <input type="checkbox" id="Berries" class="form-check-input" />
                    Berries</label>
       </section>
        </div>
    </div>
</form>

香蕉
菠萝
木薯
浆果

---

注意：请检查链接

请检查答案并通知我。最美好的祝愿：）@Linker您好谢谢您的回复：）我已经应用了您的解决方案，但仍然是同一个问题，我已经用您的代码更新了我的原始帖子，并用呈现的复选框链接到了图片。我已经在回答部分提供了stackblitz链接，它正在工作。请查收。你能在stackblitz中提供你的问题，然后我可以检查出哪里出了问题吗？：）

.checkbox-section {
    display: flex;
    align-content: center;
    align-items: center;
    height: 60px;
  }

<form>
    <div class="form-row">
        <div class="form-group form-check">
             <section>
          <label for="banana" class="form-check-label checkbox-inline">
                      <input type="checkbox" id="banana" class="form-check-input"/>
                      Bananas
                    </label>

          <label for="Pineapples" class="form-check-label">
                    <input type="checkbox" id="Pineapples" class="form-check-input"/>
                    Pineapples</label>

          <label for="Woodapple" class="form-check-label">
                    <input type="checkbox" id="Woodapple" class="form-check-input" />
                    Woodapple</label>

          <label for="Berries" class="form-check-label">
                    <input type="checkbox" id="Berries" class="form-check-input" />
                    Berries</label>
       </section>
        </div>
    </div>
</form>