reactjs - 如何使用反应引导、映射和道具将卡片排成一行?
问题描述
大家好..
我是 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} 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}/>
);
})}````
解决方案
是的,你可以做到。一种解决方案是使用flexBox 并使用 flex-direction: 行。例子:
.flex-container {
flex-direction: row;
}
推荐阅读
- javascript - 如何重构这一功能?
- python - Airflow/Composer - 一直在运行的 Python 模块
- python - 如何让我的程序在切换到另一个用户时使用我的软件(而不是系统默认软件)?
- sql - `read_sql_query` 到 pandas 时区被错误解释
- javascript - 使用递归计算字符串中有多少回文
- python - Python:如何循环列表并附加到新列表
- javascript - JavaScript中的'let'和'this'有什么区别?
- amazon-web-services - 尝试运行 New-EBApplicationVersion 以更新我的弹性 beanstalk 环境时出现 URIFormatException
- android - Jetpack 导航片段生命周期不正确
- c++ - 将指针的 std::vector 复制到 std::list