我遇到了一个问题，有人能告诉我如何在卡中应用转盘吗？我做到了，但它不起作用，下面我分享了我的整个转盘代码，请结账并告诉我如何
cards.js
这是我在卡片中使用carousal的卡片文件，但不起作用
import React from "react";
import "./Cards.css";
import Card from "./Card";
const Cards = () => {
return (
<div className="container">
<h1>
<b>Discover more features</b>
</h1>
<div className="row"></div>
<div
id="carouselExampleControls"
class="carousel slide"
data-ride="carousel"
>
<div class="carousel-inner">
<div class="carousel-item " style={{ display: "flex" }}>
<div className="row">
<div className="col-sm-3">
<Card />
</div>
<div className="col-sm-3">
<Card />
</div>
<div className="col-sm-3">
<Card />
</div>
<div className="col-sm-3">
<Card />
</div>
</div>
</div>
<div class="carousel-item">
<div className="row">
<div className="col-sm-3">
<Card />
</div>
<div className="col-sm-3">
<Card />
</div>
<div className="col-sm-3">
<Card />
</div>
<div className="col-sm-3">
<Card />
</div>
</div>
</div>
</div>
<a
class="carousel-control-prev"
href="#carouselExampleControls"
role="button"
data-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a
class="carousel-control-next"
href="#carouselExampleControls"
role="button"
data-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
);
};
export default Cards;
根据bootstrap的官方文档，
.active类需要添加到其中一张幻灯片中，否则转盘将不可见。
您错过了将.active类添加到转盘组件的.carousal-items幻灯片之一。
无需添加display: flex;属性。bootstrap的类row本身具有display: flex;属性。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div id="carouselExampleControls" class="carousel slide" style="background-color: black;" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div style="display: flex; justify-content: space-evenly;">
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</div>
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</div>
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div style="display: flex; justify-content: space-evenly;">
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</div>
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</div>
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div style="display: flex; justify-content: space-evenly;">
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</div>
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</div>
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
</html>