ngb-carousel显示异常：卡片垂直排列而非轮播，求修复方案

核心原因 #

ng-bootstrap的ngb-carousel依赖Bootstrap基础样式，未正确引入Bootstrap CSS时，轮播的布局样式无法生效，所有slide会默认垂直排列。

修复步骤 #

1. 引入Bootstrap CSS #

针对Angular CLI项目，有两种全局引入方式：

• 通过angular.json配置
  打开angular.json，在styles数组中添加Bootstrap CSS路径：

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
]

• 通过styles.css导入
  在src/styles.css中添加：

@import "~bootstrap/dist/css/bootstrap.min.css";

2. 确认NgbModule已导入 #

在你的模块（如AppModule）中确保导入NgbModule：

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports: [
    // 其他模块
    NgbModule
  ]
})
export class AppModule { }

3. 优化轮播布局（可选） #

给ngb-carousel添加Bootstrap工具类，让卡片居中并适配布局：

<ngb-carousel *ngIf="announcementList" class="d-flex justify-content-center">
  <ng-template ngbSlide *ngFor="let announcement of announcementList">
    <mat-card style="width: 500px;">
      <mat-card-header>
        <mat-card-title>
          <h2>{{announcement.title}}</h2>
        </mat-card-title>
      </mat-card-header>
    </mat-card>
  </ng-template>
</ngb-carousel>

验证 #

重启项目后，轮播应正常工作，卡片会横向轮播而非垂直堆叠。若问题仍存在，检查是否有自定义样式覆盖Bootstrap轮播样式，或确认ng-bootstrap与Bootstrap、Angular的版本是否兼容。

内容的提问来源于stack exchange，提问作者Andrei-Iulian Cristea