Question

我正在使用React-Bootstrap框架（link）并尝试使用Carousel组件。无论出于何种原因，它都是showing up funky。它正在做它的工作并在幻灯片之间过渡，但是绝对不应该看它的工作方式，所以我丢失了一些东西。

我当前正在导入最新版本的Bootstrap，并且我也尝试仅导入版本3，因为我在另一个解决方案上看到了类似的问题。尝试导入react-bootstrap js文件以防万一。试图将其包装在一个容器中，并尝试将其从容器中删除（以防它们（由于某种原因）相互冲突）。我也尝试仅使用普通的Bootstrap并遇到相同的问题。

在这一点上，我觉得我可能只需要另一双眼睛，因为我可能缺少一些愚蠢的东西。

import React, {
  Component
} from "react";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Jumbotron from "react-bootstrap/Jumbotron";
import Card from "react-bootstrap/Card";
import Carousel from "react-bootstrap/Carousel";
import {
  FontAwesomeIcon
} from "@fortawesome/react-fontawesome";

class Main extends Component {
  render() {
    return (
      // See HTML section
    );
  }
}

export default Main;

<main>
  <section id="testimonials" className="p-5">
    <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>
  </section>
</main>

React-Bootstrap轮播无法正常运行

0 个答案: