Bootstrap行布局调整：使ChipList显示在前两固定高度列下方

我有一个class为row的容器，内部包含col-1（标题栏）、col-4（输入字段）、col-7（mat-chip-list芯片列表）三个列组件。希望实现芯片列表显示在col-1和col-4这两个固定高度列的下方（效果为芯片列表位于标题和输入框正下方，可占据对应宽度），请问该需求是否可实现？

以下是我的代码：

<div class="row">
    <div class="col-1 container w-100 koostaja-headline fixed-height" style="display: flex; justify-content: left; align-items: center;">
        <span>Koostaja<span style="color: red;">*</span></span>
    </div>

    <div class="col-4 container w-100 koostaja-input">
      <mat-form-field class="no-bottom-padding w-100 fixed-height">
        <input  #koostajaInput
                matInput
                type="text"
                name="koostajaInput"
                [formControl]="koostajaControl"
                [matAutocomplete]="autoKoostaja"
                [matChipInputFor]="koostajaChipList"
                (click)="focusKoostajaInput(koostajaInput)">

        <mat-autocomplete #autoKoostaja="matAutocomplete"
                          (optionSelected)="selectKoostaja($event, koostamiseForm, koostajaInput)">

          <mat-option [disabled]="isKoostajaSelected(profiil, koostamiseForm)"
                      *ngFor="let profiil of koostajaValikFiltered | async"
                      [value]="profiil"
                      class="font-size-14px">
            {{profiil.eesnimi}} {{profiil.perenimi}} {{profiil.kohtuuksusLuhend}} {{profiil.ametikohaNimetus}}
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>
    </div>

    <div class="col-7 container w-100 koostaja-choosen">
      <mat-chip-list  #koostajaChipList>
        <span *ngFor="let koostaja of koostamiseForm.get('koostajad').value">
          <mat-chip *ngFor="let profiil of koostaja.profiilList"
                    [selectable]="false"
                    [removable]="true"
                    (removed)="removeKoostaja(profiil, koostamiseForm)"
                    class="font-size-14px"
                    matTooltip="{{profiil.kohtuuksusLuhend}} {{profiil.ametikohaNimetus}}">
                    {{koostaja.eesnimi}} {{koostaja.perenimi}}
          <mat-icon matChipRemove *ngIf="!isDokumentJoustanud">cancel</mat-icon>
          </mat-chip>
        </span>
        <mat-error *ngIf="koostamiseForm.get('koostajad')?.errors?.required">Koostaja on vaja lisada!</mat-error>
      </mat-chip-list>
    </div>
</div>

需求效果：芯片列表组件位于标题栏（col-1）和输入字段（col-4）的正下方，可选择占据整行宽度或与上方两列总宽度对齐。

完全可以实现，只需调整Bootstrap网格的结构，拆分原有的行容器即可。具体修改如下：

修改后的代码 #

<!-- 第一行：标题栏 + 输入字段 -->
<div class="row">
    <div class="col-1 container w-100 koostaja-headline fixed-height" style="display: flex; justify-content: left; align-items: center;">
        <span>Koostaja<span style="color: red;">*</span></span>
    </div>

    <div class="col-4 container w-100 koostaja-input">
      <mat-form-field class="no-bottom-padding w-100 fixed-height">
        <input  #koostajaInput
                matInput
                type="text"
                name="koostajaInput"
                [formControl]="koostajaControl"
                [matAutocomplete]="autoKoostaja"
                [matChipInputFor]="koostajaChipList"
                (click)="focusKoostajaInput(koostajaInput)">

        <mat-autocomplete #autoKoostaja="matAutocomplete"
                          (optionSelected)="selectKoostaja($event, koostamiseForm, koostajaInput)">

          <mat-option [disabled]="isKoostajaSelected(profiil, koostamiseForm)"
                      *ngFor="let profiil of koostajaValikFiltered | async"
                      [value]="profiil"
                      class="font-size-14px">
            {{profiil.eesnimi}} {{profiil.perenimi}} {{profiil.kohtuuksusLuhend}} {{profiil.ametikohaNimetus}}
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>
    </div>
</div>

<!-- 第二行：芯片列表 -->
<div class="row">
    <!-- 若要占据整行，用col-12；若要与上方两列宽度对齐，用col-5（1+4=5） -->
    <div class="col-12 container w-100 koostaja-choosen">
      <mat-chip-list  #koostajaChipList>
        <span *ngFor="let koostaja of koostamiseForm.get('koostajad').value">
          <mat-chip *ngFor="let profiil of koostaja.profiilList"
                    [selectable]="false"
                    [removable]="true"
                    (removed)="removeKoostaja(profiil, koostamiseForm)"
                    class="font-size-14px"
                    matTooltip="{{profiil.kohtuuksusLuhend}} {{profiil.ametikohaNimetus}}">
                    {{koostaja.eesnimi}} {{koostaja.perenimi}}
          <mat-icon matChipRemove *ngIf="!isDokumentJoustanud">cancel</mat-icon>
          </mat-chip>
        </span>
        <mat-error *ngIf="koostamiseForm.get('koostajad')?.errors?.required">Koostaja on vaja lisada!</mat-error>
      </mat-chip-list>
    </div>
</div>

关键修改点 #

• 将原单个row拆分为两个独立的row容器：
  • 第一个row保留col-1和col-4，维持两者在同一行的布局
  • 第二个row中，将芯片列表的列类从col-7改为col-12（占据整行）或col-5（与上方两列总宽度对齐），使其自然落在前一行下方
• 无需额外编写CSS，依靠Bootstrap网格系统即可实现需求布局

内容的提问来源于stack exchange，提问作者chivas