我想在同一行上至少獲得 2 張卡，但由于資料是一張一張地映射的，我不知道該怎么做。我正在使用一個名為“內容”的自定義組件并在此處回傳資料
import React from "react";
import { Card, CardGroup, Col, Row } from "react-bootstrap";
import { ListGroup, ListGroupItem } from "react-bootstrap";
const Content=({name, image, type, vegan, cuisines})=>{
return(
<div>
<CardGroup>
<Col xs={12} sm={6} md={4} lg={4}>
<Card>
<Card.Img variant="top" src={image} />
<Card.Body>
<Card.Title>{name}</Card.Title>
<Card.Text>
<ListGroup>
<ListGroupItem>Type: {type}</ListGroupItem>
<ListGroupItem>Vegan: {vegan}</ListGroupItem>
<ListGroupItem>Cuisines: {cuisines.cuisines.join(", ")}</ListGroupItem>
</ListGroup>
</Card.Text>
</Card.Body>
</Card>
</Col>
</CardGroup>
</div>
)
}
export default Content
uj5u.com熱心網友回復：
我相信您沒有使用 Row 組件來包裝您的列。
嘗試更換<CardGroup>與<Row>如圖中的檔案的此部分。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/407516.html
標籤：