Bootstrap 5栅格与Angular Material mat-list配合失效问题

问题的核心在于Angular Material的mat-list-item组件自带了默认的flex布局样式，直接给它添加Bootstrap的row类会导致两种布局规则冲突，从而让col-*类无法正常生效——而div元素没有这些预设样式，所以用div实现时栅格能正常工作。

这里有个简单稳妥的解决方案：在mat-list-item内部嵌套一个div.row，让Bootstrap的栅格系统在独立的容器里运行，避开mat-list-item的样式干扰：

<mat-list role="list" class="container" *ngIf="dto">
  <mat-list-item role="listitem" class="pb-2">
    <!-- 嵌套div.row作为栅格容器 -->
    <div class="row">
      <span class="champ col-12 col-md-6">NOM D'USAGER</span>
      <span class="donnee col-12 col-md-6">example 1</span>
    </div>
  </mat-list-item>
  <mat-divider></mat-divider>
  <mat-list-item role="listitem" class="pb-2">
    <div class="row">
      <span class="champ col-12 col-md-6">COURRIEL</span>
      <span class="donnee col-12 col-md-6">example 2</span>
    </div>
  </mat-list-item>
  <mat-divider></mat-divider>
</mat-list>

为什么这样能解决问题？ #

Bootstrap的栅格系统依赖row作为flex容器，col-*作为弹性子项来实现响应式布局。但mat-list-item默认的样式包括display: flex、align-items: center等规则，直接给它加row类会让两种flex布局逻辑互相干扰，导致col-*的宽度计算失效。

通过在mat-list-item内部嵌套div.row，我们给Bootstrap栅格提供了一个干净的flex容器环境，既保留了mat-list-item的原生样式（比如列表项的交互、间距等），又能让栅格系统正常工作。

如果你尝试直接修改mat-list-item的样式来兼容row（比如覆盖它的flex属性），虽然也能生效，但可能会破坏mat-list组件的默认行为，所以嵌套div的方式是更安全的选择。

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