Angular Material标签页内列表布局错乱：如何恢复并排并设间距

问题原因 #

你之前的两个mat-card能并排显示，是因为父容器有Bootstrap的row类提供flex布局上下文，col-md-5的网格规则才能生效。但添加mat-tab-group后，卡片的直接父容器变成了Angular Material自动生成的mat-tab-body，这个容器默认是块级元素，没有flex布局属性，导致col-md-5的网格规则失效，卡片自动变为块级元素上下排列。

解决方案 #

1. 恢复网格布局上下文 #

将两个mat-card包裹在带有row类的div中，重新触发Bootstrap的网格系统。

2. 设置10px间距 #

给这个row容器添加gap:10px样式，直接控制卡片间的横向间距。

修改后的模板代码 #

<mat-tab-group animationDuration="0ms">
    <mat-tab label="Tracts & Exclusions">
        <!-- 新增row容器包裹卡片，设置10px间距 -->
        <div class="row" style="gap: 10px;">
            <mat-card class="col-md-5 space">
                Tract List 
                <div class="row remove-spinner">
                    <input class="col-md-6 input" type="number"  #newTractId  matInput placeholder="Enter Tract Number">
                    <div [ngClass]="tractId.selectedOptions.selected.length > 0 ? 'remove-question-button icon-space' : 'remove-question-button icon-space disabled-button'" (click)="remove(tractId.selectedOptions.selected)">
                        <div class="fa fa-trash fa-lg" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""></div>
                    </div>
                    <div [ngClass]="newTractId.value.length > 0 ? 'remove-question-button icon-space' : 'remove-question-button icon-space disabled-button'"(click)="addItemToTracts(newTractId.value)">
                        <div class="fa fa-plus fa-lg"  viewBox="0 0 448 512"></div>
                    </div>
                </div>
                <mat-selection-list  #tractId [multiple]="true">
                    <mat-list-option *ngFor="let id of tract_id" [value]="id">
                        {{id}}
                    </mat-list-option>
                </mat-selection-list>
                <mat-list-option *ngFor="let shoe of tract_id" [value]="shoe" >
                    {{shoe}}
                </mat-list-option>
            </mat-card>

            <mat-card class="col-md-5 space">
                Excluded property's
                <mat-selection-list class="col-md-12" #shoes2>
                    <mat-list-option *ngFor="let shoe of tract_id">
                        {{shoe}}
                    </mat-list-option>
                </mat-selection-list>
            </mat-card>
        </div>
    </mat-tab>
    <mat-tab label="History">Content 2</mat-tab>
</mat-tab-group>

补充说明 #

• 若不想使用内联样式，可在全局CSS或组件CSS中定义类：

.card-row {
    gap: 10px;
}

然后将容器改为<div class="row card-row">即可。

• 检查自定义space类是否存在冲突样式，避免影响布局效果。

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