如何使用反应引导、映射和道具将卡片排成一行?
Posted
技术标签:
【中文标题】如何使用反应引导、映射和道具将卡片排成一行?【英文标题】:How to put card in row using react bootstrap, mapping and props? 【发布时间】:2021-08-17 22:16:42 【问题描述】:大家好..
我是 reactjs 新手。
我尝试使用引导程序在行中制作卡片,但它只会导致垂直线。
我尝试在 div 中使用 row 但由于映射它以垂直线而不是水平线显示 大家好。。
我是 reactjs 新手。
我尝试使用引导程序在行中制作卡片,但它只会导致垂直线。
我尝试在 div 中使用 row 但由于映射它以垂直线而不是水平线显示
这是我在 card.jsx 中的代码
import "./Card.scss"
function Card(props)
return (
<div>
<div class="d-flex justify-content-center">
<div class=" flip-card text-center" >
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card-body text-center">
<img src=props.img style=width:"30%",paddingTop: "15px"/>
<p class="card-title">props.title</p>
</div>
</div>
<div class="flip-card-back text-center">
<p>props.backside</p>
</div>
</div>
</div>
</div>
</div>
)
This is card detail
export default Card
const CardData=[
img:"./assets/img/web.png",
title:"Web Development",
backside:"Build a website using html, CSS and Bootstrap"
,
img:"./assets/img/web.png",
title:"React JS",
backside:"Used reactJs to build user-friendly interfaces applications"
,
img:"./assets/img/web.png",
title:"Java",
backside:"Done small project using java"
,
];
export default CardData
This is mapping
CardData.map((props)=>
return(
<Card
img=props.img
title=props.title
backside=props.backside/>
);
)````
【问题讨论】:
【参考方案1】:是的,你可以做到。解决方案之一是使用flexBox 并使用 flex-direction: 行。示例:
.flex-container
flex-direction: row;
【讨论】:
【参考方案2】:用 div 包裹您的地图代码并添加 display: 'flex' , flexDirection: 'row'
样式以使子级呈现水平而不是垂直。
<div style=display: 'flex', flexDirection: 'row'>
CardData.map((props)=>
return(
<Card
img=props.img
title=props.title
backside=props.backside/>
);
)
</div>
【讨论】:
以上是关于如何使用反应引导、映射和道具将卡片排成一行?的主要内容,如果未能解决你的问题,请参考以下文章