ng-bootstrap 的手风琴不占用 Angular 11 应用程序中组件的全部宽度

编程问答 2022-05-23

问题描述

我在我的 Angular 11 应用程序的组件之一中使用了 ng-bootstrap 的 Accordion 组件。手风琴仅占用其内部内容的宽度，如下面的屏幕截图所示。

enter image description here

我希望手风琴占据屏幕的全部可用宽度，如下所示

enter image description here

section.component.html 文件中的代码是

<ngb-accordion [cloSEOthers]="true" activeIds="static-1">
   <ngb-panel id="static-1" title="Section1">
     <ng-template ngbPanelContent>
       abc
     </ng-template>
   </ngb-panel>
   <ngb-panel id="static-2" title="Section2">
     <ng-template ngbPanelContent>
       def
     </ng-template>
   </ngb-panel>
   <ngb-panel id="static-3" title="Section3" >
     <ng-template ngbPanelContent>
       ghi
     </ng-template>
   </ngb-panel>
</ngb-accordion>

我在 section.module.ts 文件中同时导入了 NgbAccordionModule 和 NgbModule，如下所示

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { SectionRoutingModule } from './section-routing.module';
import { SectionComponent } from './section.component';
import { NgbAccordionModule,NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [SectionComponent],imports: [
    CommonModule,SectionRoutingModule,NgbAccordionModule,NgbModule
 ]
})
export class SectionModule { }

我不知道是什么导致了这个问题。请帮我解决这个问题

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

accordionangularangularng-bootstrap