如何让Bootstrap 5网格适配ngPrime Splitter并使用容器查询？

一、让Bootstrap网格随Splitter拖动适配 #

核心思路是监听Splitter的尺寸变化，结合CSS容器查询，让网格布局基于面板容器的宽度而非浏览器视口。

1. 模板与组件逻辑 #

在Angular组件中，给Splitter绑定resize事件，实时获取左右面板的宽度并添加对应断点类：

<!-- 组件模板 -->
<p-splitter [style]="{'height': '100vh'}" (onResize)="onSplitterResize($event)">
  <ng-template pTemplate>
    <div class="splitter-panel" #leftPanel>
      <div class="row">
        <div class="col-custom-6">左面板内容1</div>
        <div class="col-custom-6">左面板内容2</div>
      </div>
    </div>
  </ng-template>
  <ng-template pTemplate>
    <div class="splitter-panel" #rightPanel>
      <div class="row">
        <div class="col-custom-4">右面板内容1</div>
        <div class="col-custom-4">右面板内容2</div>
        <div class="col-custom-4">右面板内容3</div>
      </div>
    </div>
  </ng-template>
</p-splitter>

// 组件类
import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-splitter-grid',
  templateUrl: './splitter-grid.component.html',
  styleUrls: ['./splitter-grid.component.css']
})
export class SplitterGridComponent {
  @ViewChild('leftPanel') leftPanel!: ElementRef;
  @ViewChild('rightPanel') rightPanel!: ElementRef;

  onSplitterResize(event: any) {
    // 清除旧的断点类
    [this.leftPanel.nativeElement, this.rightPanel.nativeElement].forEach(panel => {
      panel.classList.remove('panel-sm', 'panel-md', 'panel-lg');
    });

    // 给左面板添加断点类
    const leftWidth = this.leftPanel.nativeElement.offsetWidth;
    if (leftWidth >= 992) {
      this.leftPanel.nativeElement.classList.add('panel-lg');
    } else if (leftWidth >= 768) {
      this.leftPanel.nativeElement.classList.add('panel-md');
    } else if (leftWidth >= 576) {
      this.leftPanel.nativeElement.classList.add('panel-sm');
    }

    // 给右面板添加断点类
    const rightWidth = this.rightPanel.nativeElement.offsetWidth;
    if (rightWidth >= 992) {
      this.rightPanel.nativeElement.classList.add('panel-lg');
    } else if (rightWidth >= 768) {
      this.rightPanel.nativeElement.classList.add('panel-md');
    } else if (rightWidth >= 576) {
      this.rightPanel.nativeElement.classList.add('panel-sm');
    }
  }
}

2. CSS容器查询定义网格规则 #

通过容器查询，让网格列的宽度随面板容器尺寸变化：

.splitter-panel {
  container-type: inline-size; /* 启用容器查询 */
  padding: 1rem;
}

/* 自定义网格列默认样式（小尺寸） */
.col-custom-6 {
  flex: 0 0 auto;
  width: 100%;
}
.col-custom-4 {
  flex: 0 0 auto;
  width: 100%;
}

/* 面板宽度≥576px时的网格规则 */
@container panel-sm (min-width: 576px) {
  .col-custom-6 {
    width: 50%;
  }
  .col-custom-4 {
    width: 50%;
  }
}

/* 面板宽度≥768px时的网格规则 */
@container panel-md (min-width: 768px) {
  .col-custom-6 {
    width: 50%;
  }
  .col-custom-4 {
    width: 33.3333%;
  }
}

/* 面板宽度≥992px时的网格规则 */
@container panel-lg (min-width: 992px) {
  .col-custom-6 {
    width: 50%;
  }
  .col-custom-4 {
    width: 33.3333%;
  }
}

二、让Bootstrap网格使用容器查询替代媒体查询 #

Bootstrap默认网格系统基于视口媒体查询，若要改用容器查询，需自定义网格类（如上述示例的col-custom-*），而非直接使用原生col-*类——因为原生col-*硬绑定了视口媒体查询，无法直接切换为容器查询。

如果项目使用Bootstrap 5.3+，可以结合其内置的容器查询工具类（如cq-md:flex-row），但核心网格布局仍需通过自定义容器查询规则实现。若需完全替换Bootstrap原生网格，也可通过Sass重新编译框架，将媒体查询替换为容器查询，但这种方式成本较高，适合大型项目；当前场景下，自定义容器查询网格类是更轻量的解决方案。

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