如何使用 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>