我应该如何管理它们，以便它们以相等的间距并排出现？答案

【问题标题】：How should i manage them so that they come side by side with equal spacing?我应该如何管理它们，以便它们以相等的间距并排出现？
【发布时间】：2021-03-16 17:28:55
【问题描述】：

我正在使用 React Bootstrap 并动态显示我的卡片，无论我尝试什么，它们似乎都想垂直堆叠。以下是渲染它们的组件：

import React from 'react'
import Card from "react-bootstrap/Card";
import {Button, Form, FormGroup , Label, Input ,Grid,Col,Row} from 'react-bootstrap'
import './Cards.css'
 
  const Cards = () => {
    const cardInfo = [
      {
        image: "https://www.flaticon.com/svg/vstatic/svg/3069/3069358.svg?token=exp=1615897288~hmac=469845378e075208e34824e824d0244d",
        title: "Lebron James",
        text: "THE GOAT",
      },
      {
        image: "https://i.insider.com/50f967f56bb3f7830a000019",
        title: "Samarth Datir",
        text: "THE GOAT",
      }
    ];

    const renderCard = (card, index) => {
      return (
        <contaniner>
        <Row>
          <Col>
 <Card style={{width: "25rem",flexDirection: 'row',justifyContent: 'right', display: 'flex' ,flex:1}} key={index} className="box">
          <Card.Img variant="top" src="holder.js/100px180" src={card.image} />
          <Card.Body>
            <Card.Title>{card.title}</Card.Title>
            <Card.Text>{card.text}</Card.Text>
          </Card.Body>
        </Card>
        </Col>
        </Row>
        </contaniner>


      )
    }   
    
  return (
    <div className="App">
     {cardInfo.map(renderCard)}
    </div>
  )
}

export default Cards;

我应该如何管理它们，以便它们以相等的间距并排出现

【问题讨论】：

标签： react-bootstrap

【解决方案1】：

你应该这样做。每个项目都应该在行内，而不是每个项目都有自己的行。

    const renderCard = (card, index) => {
      return (
          <Col md={6}> // Here you should use your options for display md={4} for 3 items on the row, md={3} for 4 items etc.. (Also md is optional there are xs etc. options.) 
            <Card style={{width: "25rem",flexDirection: 'row',justifyContent: 'right', display: 'flex' ,flex:1}} key={index} className="box">
              <Card.Img variant="top" src="holder.js/100px180" src={card.image} />
              <Card.Body>
                <Card.Title>{card.title}</Card.Title>
                <Card.Text>{card.text}</Card.Text>
              </Card.Body>
            </Card>
          </Col>
      )
    }   

return (
  <div className="App">
    <contaniner>
      <Row>
        {cardInfo.map(renderCard)}
      <Row>
    </contaniner>
  </div>
  )

【讨论】：