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

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 的宽度。确保旋转木马不在容器中。

空白将是填充或边距。只有通过网站链接才能看到它是什么。

基思