如何克服 ng bootstrap Carousel 组件在右侧有空白

如何解决如何克服 ng bootstrap Carousel 组件在右侧有空白

我已经为我的应用程序尝试过 ng bootstrap Carousel。但是当我使用它时，页面右侧有空白：

我在下面提到了尝试过的代码：

bags.component.html

<ngb-carousel *ngIf="images">
    <ng-template ngbSlide>
      <div class="picsum-img-wrapper">
        <img [src]="images[0]" alt="Random first slide">
      </div>
      <div class="carousel-caption">
        <h3>First slide label</h3>
        <p>Nulla vitae elit libero,a pharetra augue mollis interdum.</p>
      </div>
    </ng-template>
    <ng-template ngbSlide>
      <div class="picsum-img-wrapper">
        <img [src]="images[1]" alt="Random second slide">
      </div>
      <div class="carousel-caption">
        <h3>Second slide label</h3>
        <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit.</p>
      </div>
    </ng-template>
    <ng-template ngbSlide>
      <div class="picsum-img-wrapper">
        <img [src]="images[2]" alt="Random third slide">
      </div>
      <div class="carousel-caption">
        <h3>Third slide label</h3>
        <p>Praesent commodo cursus magna,vel scelerisque nisl consectetur.</p>
      </div>
    </ng-template>
  </ngb-carousel>

bags.component.ts：

import { Component,OnInit } from '@angular/core';

@Component({
  selector: 'app-bags',templateUrl: './bags.component.html',styleUrls: ['./bags.component.css']
})
export class BagsComponent implements OnInit {

  constructor() { }
  images = [944,1011,984].map((n) => `https://picsum.photos/id/${n}/900/500`);
  ngOnInit(): void {
  }

}

尝试过的解决方案：

.row.carousel-inner {
    margin: 0;
}

.row {
    margin: 0!important;
}

我尝试过的解决方案也不起作用。我怎么解决这个问题。谢谢

解决方法

.css 中有错误

ngb-carousel .picsum-img-wrapper>img {
  position: absolute;
  top: 0;
  width:100%; //<--use width 100%,not left:0
  bottom: 0;
  right: 0;
}