如何修改ng-bootstrap Offcanvas组件面板的宽度为35%？

完全支持自定义Offcanvas面板宽度，你提到的panelClass就是官方提供的自定义面板样式的标准属性，按以下步骤配置即可实现35%宽度的需求：

步骤1：修改TS侧的Offcanvas配置 #

在调用open方法时，给panelClass传入自定义的样式类名，替换原来的空字符串即可：

open(content: any) {
  this.offcanvasService.open(content, { 
    position: 'end', 
    panelClass: 'custom-offcanvas-width' // 绑定自定义样式类
  });
}

步骤2：编写全局自定义样式 #

注意：Offcanvas组件默认会被挂载到页面<body>节点下，不要把样式写在组件的局部隔离样式中，要写到项目的全局样式文件（通常是styles.css/styles.scss）里，否则会因为组件样式隔离规则无法命中元素。

添加如下样式代码：

.custom-offcanvas-width {
  width: 35% !important;
  /* 适配小屏场景，避免窄屏下面板溢出 */
  max-width: 100%;
}

/* 可选：移动端断点下自动占满屏幕宽度，根据项目需求选择添加 */
@media (max-width: 768px) {
  .custom-offcanvas-width {
    width: 100% !important;
  }
}

小技巧：如果不想使用!important强制优先级，也可以通过覆盖Bootstrap内置的CSS变量实现，权重足够时不需要强制覆盖：

.custom-offcanvas-width {
  --bs-offcanvas-width: 35%;
  max-width: 100%;
}

常见不生效原因 #

• panelClass配置项没有传入实际的自定义类名，和你之前的代码一样传了空字符串
• 样式写在了组件局部样式中，选择器无法匹配挂载到body下的Offcanvas元素
• 样式优先级不够，被Bootstrap默认的Offcanvas样式覆盖

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