Question

我编写了以下表单来内联多个 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

Answer 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

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

1 个答案: