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

【问题标题】：How to prevent overlapping of text label of checkboxes for inline checkboxes?如何防止内联复选框的复选框文本标签重叠？
【发布时间】：2021-05-07 07:05:41
【问题描述】：

我有下面的表格写成内联多个checkboxes

<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>

但问题是checkboxes 的文本标签与下一个标签重叠， shown on this image

如何防止这种重叠并使文本在所有checkboxes 中清晰可见？

更新我已经根据“链接器”（见下文）的建议进行了更改，但我仍然遇到同样的问题

代码

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

              </section>

            </div>
      
          </div>

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

结果 here is the generated checkboxes

【问题讨论】：

请检查答案并告诉我。最良好的祝愿:)
@Linker 你好，谢谢你的回复：) 我已经应用了你的解决方案，但仍然是同样的问题，我已经用你的代码更新了我的原始帖子，并链接到带有渲染复选框的图像
我在答案部分提供了一个 stackblitz 链接，它正在工作。请检查。您能否在 stackblitz 中提供您的问题，然后我可能会检查它哪里出错了？ :)

标签： html css angular twitter-bootstrap

【解决方案1】：

您可以使用下面的部分标签<section></section>链接=>

<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>

注意：请查看链接StackBlitz

【讨论】：