如何在整个页面上缩放轮播的宽度

Question

<div>
        <carousel>
          <slide>
            <img src="ny.jpg" alt="First slide">
            <div class="caption">
              <h4>Launch of Mount Eliza </h4>
            </div>
          </slide>
          <slide>
            <img src="chicago.jpg" alt="Second slide">
            <div class="caption">
              <h4>Launch of Mount Eliza </h4>
            </div>
          </slide>
          <slide>
            <img src="mex.jpg" alt="Third slide">
            <div class="caption">
              <h4>Launch of Mount Eliza </h4>
            </div>
          </slide>
        </carousel>
      </div>

我尝试了很多解决方案来调整旋转木马的宽度。但它正在发生。我想让旋转木马在整个页面宽度上伸展。我也想摆脱导航栏和旋转木马之间的空白区域。怎么做到这一点？ 注意：我在这个旋转木马上方有一个导航栏标题，我将旋转木马作为一个单独的组件。所以我认为将html体设置为100％不会起作用。因为我在旋转木马下面还有更多的部分。我不能手动将宽度设置为％，因为我希望它具有响应性。我尝试了下面的代码并且它没有用。

.carousel
    width: 100%;
    margin: auto;

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
    width: 100%;
    margin: auto;
}

Answer 1

使图像宽度大小相同。我会尝试1903px的宽度。确保转盘不在容器中。

空格将为填充或边距。只有链接到该网站，才能有人看到它是什么。

基思