react-bootstrap 轮播宽度行为

Posted 2023-02-22

【中文标题】react-bootstrap 轮播宽度行为

【英文标题】：react-bootstrap carousel width behavior

【发布时间】：2017-09-22 16:18:18

【问题描述】：

我想知道“正确的解决方案”是什么，例如如何在页面中正确显示轮播或您将如何做。

http://i.imgur.com/m8VYVRv.png

来自 react-bootstrap 组件网站的代码

             <Well>
                <Carousel>
                    <Carousel.Item>
                        <img width=900 height=500  src="src/assets/construction-maison.jpg"/>
                        <Carousel.Caption>
                            <h3>First slide label</h3>
                            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                        </Carousel.Caption>
                    </Carousel.Item>
                    <Carousel.Item>
                        <img width=900 height=500  src="src/assets/chantier.jpg"/>
                        <Carousel.Caption>
                            <h3>Second slide label</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        </Carousel.Caption>
                    </Carousel.Item>
                    <Carousel.Item>
                        <img width=900 height=500  src="src/assets/Maison_en_construction_Demoli.jpg"/>
                        <Carousel.Caption>
                            <h3>Third slide label</h3>
                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                        </Carousel.Caption>
                    </Carousel.Item>
                </Carousel>
            </Well>

http://i.imgur.com/BgqNfTE.png

img 
    margin: auto;

这是我提供的解决方案，但感觉有点“过时”。

是否应该使用自动边距缩小轮播以匹配图片的大小，然后将其居中放置在页面上？

【参考方案1】：

您可以尝试将.carousel 设置为与您的图像相同的固定尺寸，然后根据需要进行对齐：

.carousel 
  width:900px;
  height:500px;
  margin: auto;

根据评论进行编辑，为了保持响应性，请使用媒体查询（另请注意，除非您在轮播和图片之间指定尺寸，否则它们不会匹配）：

@media (max-width: 900px) 
    .carousel 
      width:auto;
      height:auto;
    

【讨论】：

编辑：是的，但这会使组件的响应能力关闭，我的意思是当您的宽度低于 900 像素时，轮播不会自行缩小。 ，我猜小了点：max-width: 900px; 会改正的。

我在上面编辑过，希望有所帮助。是的，最大宽度也可以。