Question

我想知道如何在页面中正确显示轮播或者如何进行轮询，这是什么“正确的解决方案”。

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

react-bootstrap组件网站的代码

             <Well>
                <Carousel>
                    <Carousel.Item>
                        <img width={900} height={500} alt="900x500" 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} alt="900x500" 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} alt="900x500" 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;
}

这是我带来的解决方案，但感觉有点“关闭”。

旋转木马是否应以自动边距缩小以匹配图片的大小，然后将其居中在页面上？

Answer 1

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

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

基于评论编辑，以保持响应能力使用媒体查询（另请注意，除非您在轮播和图片之间指定尺寸，否则它们不会匹配）：

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

react-bootstrap轮播宽度行为

1 个答案: