首页 > 解决方案 > React-bootstrap Carousels 垂直渲染

问题描述

我只是想渲染一个非常非常基本的直旋转木马。

但它甚至没有正确渲染。显然我可能会错过一些非常愚蠢的东西。它将所有图像垂直渲染在一起。指示器也未正确对齐。是否需要一些css。如果是的话,我可以从哪里得到它。

旋转木马

<Carousel>
  <Carousel.Item>
    <img
      className="d-block w-100"
      src="holder.js/800x400?text=First slide&bg=373940"
      alt="First slide"
    />
    <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
      className="d-block w-100"
      src="holder.js/800x400?text=Second slide&bg=282c34"
      alt="Third slide"
    />

    <Carousel.Caption>
      <h3>Second slide label</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </Carousel.Caption>
  </Carousel.Item>
  <Carousel.Item>
    <img
      className="d-block w-100"
      src="holder.js/800x400?text=Third slide&bg=20232a"
      alt="Third slide"
    />

    <Carousel.Caption>
      <h3>Third slide label</h3>
      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
    </Carousel.Caption>
  </Carousel.Item>
</Carousel>;

请帮助我,我完全陷入了这个问题。任何帮助将不胜感激。

谢谢

标签: reactjsbootstrap-4carouselreact-bootstrap

解决方案


推荐阅读