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

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>

【讨论】:

以上是关于如何使用反应引导、映射和道具将卡片排成一行?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用react-redux将redux商店中封装的ui状态映射到道具?

如何使用 CSS 和 HTML 将三张卡片对齐在一行中?

为啥我不能让这些卡片排成一行。他们不断地落入一列

如何呈现包含打开和未关闭标签的组件?反应.js

需要帮助让道具使用反应

如何使引导卡拉伸到列内的屏幕高度?