我正在使用 ng-bootstrap 为我的 Angular 元素创建轮播。我已成功遵循 https://ng-bootstrap.github.io/#/components/carousel/examples 中显示的示例现在屏幕中间有一个旋转木马。
我现在希望轮播占据整个屏幕宽度,而不是仅仅位于中间。我该怎么做?
我试过向轮播添加一个类并改变宽度:
组件 HTML
<ngb-carousel *ngIf="images" class="myclass">
<ng-template ngbSlide>
<img [src]="images[0]" alt="Random first slide">
<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>
<img [src]="images[1]" alt="Random second slide">
<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>
<img [src]="images[2]" alt="Random third slide">
<div class="carousel-caption">
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</ng-template>
</ngb-carousel>
组件 CSS
.myclass{
width: 100%;
}
最佳答案
在此处直接在您的 html 标记中添加示例:
<img [src]="images[0]" alt="Random first slide" class="mh-100" style="width: 100%; height: 50vh">
关于html - 设置 ng-bootstrap 轮播的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51499848/