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

问题描述

我在 Carousel Bootstrap 的帮助下创建了一个幻灯片。
但是我无法缩小 img-wrapper 的宽度。
这就是我现在所拥有的：我现在的幻灯片图片我
怎样才能缩小紫色部分？所以它会坚持图片吗？谢谢！！
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;
}

标签： htmlcssangularcarousel

您可以将轮播包装在 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/

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

问题描述

解决方案

推荐阅读