反应 bootstrap "Carousel.Caption" 内的文本不可见

Question

<Carousel.Item>
      <Carousel.Caption>
      <h3>AHJHSJ SHS</h3>
      <p>Lorem ipsum dolor sit amet</p>
      </Carousel.Caption>
</Carousel.Item>

但是，如果我删除 Carousel.Caption 标签...那么“h3”和“p”标签都会在浏览器上呈现。

Answer 1

我认为您在 className

中遗漏了 {}

<Carousel.Item>
  <Carousel.Caption className={"cap"}>
  <h3>AHJHSJ SHS</h3>
  <p>Lorem ipsum dolor sit amet</p>
  </Carousel.Caption>
</Carousel.Item>

Answer 2

问题是我试图在没有图像标签的情况下使用 Carousel.Item。如果我不使用图片标签，标题就不会显示。

看起来字幕在图像顶部可见，如果没有图像，则不会显示任何内容。

下面的代码可以正常工作：

<Carousel.Item>
    <img
      className="d-block w-100"
      src={img_path}
      alt="First slide"
    />
    <Carousel.Caption>
      <h3>First slide label</h3>
      <p>Nulla aretra augue mollis interdum.</p>
    </Carousel.Caption>
</Carousel.Item>

反应 bootstrap "Carousel.Caption" 内的文本不可见

Text inside react bootstrap "Carousel.Caption" not visible

reactjs

react-bootstrap