如何使用react引导、映射和道具将卡片排成一行

Question

大家好。。

我是reactjs的新手。

我试着用bootstrap把卡片排成一行，但结果只在垂直线上。

我尝试在div中使用行，但由于映射，它显示在垂直行而不是水平行大家好。。

我是reactjs的新手。

我试着用bootstrap把卡片排成一行，但结果只在垂直线上。

我尝试在div中使用行，但由于映射，它显示在垂直行而不是水平中

这是我在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} alt="image" 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}/>

);
})}````

Answer 1

是的，你可以做到。其中一个解决方案是使用flexBox并使用弯曲方向：行。示例：

.flex-container {
flex-direction: row;
}

Answer 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>