如何在 react-bootstrap 中自动调整行大小？

Question

我正在尝试使用 react-bootstrap 在每行中制作 3 组卡片。我做到了，但是如果一张卡片的高度较长，则会出现空间并使整行变得难看。看图片（我基本上不想要我圈出的空间。我怎样才能做到这一点？）。照片：

代码： 我的卡片组件：

import React from 'react'
import { Card, CardGroup, Col, Container, Row, Tab, ListGroup } from 'react-bootstrap'
import { Link } from 'react-router-dom';

function SoruKart(props) {
    return (<Col>
        <Card style={{ margin: 10 }}>
            <Card.Body>
                <Card.Title>{props.title}</Card.Title>
                <Card.Text>
                    {props.description}
                </Card.Text>
            </Card.Body>
            <Card.Footer>
                <small className="text-muted">{props.type}</small>
            </Card.Footer>
        </Card>
    </Col>
    )
}

export default SoruKart

这里是我使用组件的地方：

<Row>
          <SoruKart title="title" description="descriptResponseForm component actually exists. The path seems to be correct. How should I fix it? Why is import error occuring?ResponseForm component actually exists. The path seems to be correct. How should I fix it? Why is import error occuring?ResponseForm component actually exists. The path seems to be correct. How should I fix it? Why is import error occuring?ion" type="Kolay" />
          <SoruKart title="title" description="description" type="Kolay" />
          <SoruKart title="title" description="description" type="Kolay" />
        </Row>
        <Row>
          <SoruKart title="title" description="description" type="Kolay" />
          <SoruKart title="title" description="description" type="Kolay" />
          <SoruKart title="title" description="description" type="Kolay" />
        </Row>
        <Row>
          <SoruKart title="title" description="description" type="Kolay" />
          <SoruKart title="title" description="description" type="Kolay" />
          <SoruKart title="title" description="description" type="Kolay" />
        </Row>

Answer 1

想通了。我没有使用行和列，而是将其包装在一个带有“卡片列”的 div 中，并且所有内容都完美排列。