如何解决如何使用 react bootstrap、mapping 和 props 将卡片排成一行?
大家好..
我是 reactjs 的新手。
我尝试使用 bootstrap in 将卡片排成一排,但结果只有垂直线。
我尝试在 div 中使用 row 但因为映射它以垂直线而不是水平线显示 大家好..
我是 reactjs 的新手。
我尝试使用 bootstrap in 将卡片排成一排,但结果只有垂直线。
我尝试在 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} 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"
},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}/>
);
})}````
解决方法
是的,你可以做到。解决方案之一是使用 flexBox 并使用 flex-direction: 行。示例:
.flex-container {
flex-direction: row;
}
用 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。