我正在從 MongoDB 獲取一些資料并嘗試在 Bootstrap 5 卡中顯示它。雖然我的代碼作業正常并且資料被正確地提取到 Bootstrap 卡中，但如果我在資料庫中有 10 個條目，那么 10 個卡會顯示在同一行中。
相反，我想做的是使用 Bootstrap 網格，每行最多顯示三張卡片。我怎樣才能在這里實作呢？
這是顯示卡片的頁面：
import axios from "axios"
import Navbar from "../../components/Navbar"
import ProductCard from "../../components/ProductCard"
export default function starters({ productList }) {
return (
<div className="container-fluid p-0">
<Navbar></Navbar>
<div className="container text-center">
<h1 className="display-3">Starters</h1>
<div className="container text-center">
<div className="row">
<div className="col-md-4">
{productList.map((Product) => (
<ProductCard key={Product._id} Product={Product}></ProductCard>
))
}
</div>
</div>
</div>
</div>
</div>
)
}
export const getServerSideProps = async () => {
const res = await axios.get("http://localhost:3000/api/products")
return {
props: {
productList: res.data,
},
}
}
這是卡片組件：
export default function Products({Product}) {
return (
<>
<div className="card m-5" style={{width: "18rem;"}}>
<img src={Product.img} className="card-img-top" alt="..."/>
<div className="card-body">
<h5 className="card-title">{Product.title}</h5>
<p className="card-text">{Product.desc}</p>
<p className="card-text">{Product.prices[0]}</p>
<a href="#" className="btn btn-primary">Go somewhere</a>
</div>
</div>
</>
)
}
uj5u.com熱心網友回復：
我認為您必須將其<div className="col-md-4">移至Products.
export default function Products({Product}) {
return (
<div className="col-md-4">
<div className="card m-5" style={{width: "18rem;"}}>
<img src={Product.img} className="card-img-top" alt="..."/>
<div className="card-body">
<h5 className="card-title">{Product.title}</h5>
<p className="card-text">{Product.desc}</p>
<p className="card-text">{Product.prices[0]}</p>
<a href="#" className="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/464157.html
標籤：javascript mongodb 推特引导 下一个.js