Carousel Bootstrap - 如何缩小 img-wrapper 的宽度？

Question

我在 Carousel Bootstrap 的帮助下创建了一个幻灯片。
但是我无法缩小 img-wrapper 的宽度。
这就是我现在所拥有的： picture of my slideshow now
我怎样才能缩小紫色部分？所以它会粘在图片上吗？谢谢！！
slideshow.component.html:

<ngb-carousel #carousel="ngbCarousel" class="text-lg-center" #myCarousel="ngbCarousel" showNavigationArrows="true"
  interval="3000" pauseOnHover="false">
  <ng-template ngbSlide *ngFor="let image of images;let i = index" id="{{i}}">
    <div class="picsum-img-wrapper">
      <img [src]="image" alt="Random first slide" style=" max-height:300px; margin:0 auto;">
    </div>
    <div class="carousel-caption">
      <h3>{{titles[i]}}</h3>
    </div>
  </ng-template>
</ngb-carousel>

slideshow.component.css:

div{
    font-family: 'Varela Round', sans-serif;
}

.picsum-img-wrapper{
    background-color: blueviolet;
}

Answer 1

您可以将您的旋转木马包裹在 Bootstrap 列中，然后您可以调整它（通过更改 col-md-XX）：

<div class="container">
  <div class="row">
    <div class="col-md-2">
      One of three columns
    </div>
    <div class="col-md-8">
      INSERT YOUR CAROUSEL HERE
    </div>
    <div class="col-md-2">
      One of three columns
    </div>
  </div>
</div>

我还可以建议使用 Bootstrap 轮播： https://getbootstrap.com/docs/4.5/components/carousel/

Carousel Bootstrap - 如何缩小 img-wrapper 的宽度？

Carousel Bootstrap - how to narrow the width of the img-wrapper?

html

css

carousel

angular