时间戳

首页 > 解决方案 > Bootstrap Carousel 跳跃高度

javascript - Bootstrap Carousel 跳跃高度

问题描述

我有一个react-bootstrap旋转木马。

它在滚动时会跳跃，因为图像具有不同的大小，但是如果我给它们大小weight: 1309px并且- 我会失去响应能力，并且在每个设备上height: 730px只有并且它不会调整大小以响应。730pxheight

如何修复它以使每张图片都具有相同的大小（不允许轮播跳跃）并保持响应能力？

看看图片，以及箭头如何在不同的高度跳跃：

![引导轮播截图][1]

这是我的代码：

<div id="carousel-container">
  <Carousel>
    <Carousel.Item>
      <img src={firstImg} />
      <Carousel.Caption>
        <h3>Niagara Falls</h3>
        <p>One of the most famous wonders of nature is Niagara Falls.</p>
      </Carousel.Caption>
    </Carousel.Item>
    <Carousel.Item>
      <img src={secondImg} />
      <Carousel.Caption>
        <h3>Monuments Valley</h3>
        <p>Monument Valley is a region of the Colorado Plateau characterized by a cluster of vast sandstone buttes.</p>
      </Carousel.Caption>
    </Carousel.Item>
    <Carousel.Item>
      <img src={thirdImg} />
      <Carousel.Caption>
        <h3>Grand Canyon</h3>
        <p>The Grand Canyon is a famous canyon in Arizona.</p>
      </Carousel.Caption>
    </Carousel.Item>
  </Carousel>
</div>

标签： javascripthtmlcssreactjsreact-bootstrap

解决方案

尝试在className="d-block w-100"您的<img />标签中使用。而且......如果这不起作用，托盘使用另一个更高高度的图像！

推荐阅读