使用Bootstrap无法让标签与Angular组件横向对齐问题求助

问题根源 #

你当前使用的form-check类是Bootstrap专为复选框/单选框设计的布局类，并不适用于标签+文本输入框的场景；同时app-communes内部的form-check-input类也会引入额外的布局样式，导致元素无法横向对齐。

具体修改方案 #

1. 父组件布局调整

将原有的form-check替换为Bootstrap的响应式表单行布局，确保标签与组件垂直对齐且横向排列：

<form>
  <div class="row align-items-center">
    <label class="col-auto form-label" for="communes">Sélectionnez une commune :</label>
    <div class="col">
      <app-communes id="communes" anneeCOG="2023"></app-communes>
    </div>
  </div>
</form>

2. 子组件内部样式修正

移除form-check-input类，给输入框添加Bootstrap标准表单样式类，确保输入框与标签对齐：

<div>
  <input type="text" class="form-control w-100" list="communesCOG" [(ngModel)]="libelleCommuneSelectionnee" (ngModelChange)="selectCommune($event)"
     placeholder="Tapez le nom de la commune">

  <datalist id="communesCOG">
    <option *ngFor="let commune of communes" [value]="commune.codeCommune">{{commune.nomCommune}} ({{commune.nomDepartement}})</option>
  </datalist>
</div>

关键说明 #

• row align-items-center：让行内所有元素垂直居中，解决上下错位问题
• col-auto：标签仅占用自身内容宽度，避免挤压输入框空间
• col：让输入框组件占据剩余可用宽度，适配不同屏幕尺寸
• form-control：Bootstrap标准表单输入样式，保证风格统一且消除默认布局冲突
• w-100：让输入框填满父容器宽度，避免宽度不足

可选微调 #

如果需要调整标签与输入框的间距，可添加自定义CSS：

.form-label {
  margin-right: 0.5rem;
}

内容的提问来源于stack exchange，提问作者Marc Le Bihan