如何在左侧添加图片，在右侧添加文字，并使用 Reactstrap 将它们包裹在卡片中？

Question

JS代码

import React from 'react';
import styles from './CountriesTable.module.css';

const CountriesTable = ({ countires }) => {

...

  return (
    <div className='table'>
      <Row>
        {countries.map((country) => (
          <Col xs="12" sm="6" lg="4">
              <Card className={styles.card}>
                <CardImg className={styles.icon} src={country.flag} alt={country.name} />
                <CardBody className={styles.body}>
                  <CardTitle tag="h5">{country.name}</CardTitle>
                  <div className='tag'>
                    {country.languages.map(({ name }) => (
                      <Badge color="secondary" pill>{name}</Badge>
                    ))}
                  </div>
                  <CardText>Test text message here</CardText>
                </CardBody>
              </Card>
          </Col>
        ))}
      </Row>
    </div>
  )
}

...

export default CountriesTable;

CSS

.row {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 auto;
  margin-right: -12px;
  margin-left: -12px;
}

.card {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-around;
  padding: 8px;
  text-align: left;
  width: 100%;
  height: 90%;
  background-color: var(--background-color-light);
  border-radius: 8px;
  margin-bottom: 10px;
  box-shadow: var(--box-shadow);
  font-weight: 500;
  transition: transform 200ms ease-in-out, box-shadow 200ms ease-in-out;
  cursor: pointer;
}

.icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px!important;
  min-width: 70px;
  margin-right: 4px;
}

.icon img {
  border-radius: 2px;
  width: 100%;
}

.body {
  flex: 1;
  align-items: center;
  font-weight: 500;
  font-size: 16px;
  text-align: left;
}

.price {
  text-align: right;
  margin-bottom: 8px;
}

我正在使用 Reactstrap (https://reactstrap.github.io/) 在 React 中使用 Bootstrap。

我正在努力适应左侧的标志，以及每张卡片右侧的其余内容。目前，我面临两个问题：

1. 某些卡片内容超出右侧的卡片边界。

2. 对于某些卡片，旗帜等内容仍然是垂直展开的。

我是 CSS 和 React 的新手。非常感谢您提前提供任何建议！

Answer 1

显然，您需要将media queries 用于不同的break points，因为每张卡都有动态的国家/地区值。我们需要寻找最好的方法来做到这一点。

我为您创建了一个简洁的演示，并且所有断点都得到了正确处理：Responsive Cards

.row {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 10px;
}

.card {
  display: flex;
  padding: 8px;
  background-color: orange;
  box-shadow: 0 0 10px 10px #cccccc;
  font-weight: 500;
  transition: transform 200ms ease-in-out, box-shadow 200ms ease-in-out;
  cursor: pointer;
  border: 1px solid green;
}

.icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px !important;
  min-width: 70px;
  margin-right: 4px;
}

.icon img {
  border-radius: 2px;
  width: 100%;
}

.body {
  flex: 1;
  align-items: center;
  font-weight: 500;
  font-size: 16px;
  text-align: left;
}

.price {
  text-align: right;
  margin-bottom: 8px;
}

@media (min-width: 400px) {
  .row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 700px) {
  .row {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1000px) {
  .row {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1200px) {
  .row {
    grid-template-columns: repeat(4, 1fr);
  }
}

import React from "react";
import {
  Col,
  Row,
  Card,
  CardImg,
  CardBody,
  CardText,
  CardTitle,
  Badge,
} from "reactstrap";

import "./CardIssue.css";

const countries = [
  {
    name: "Afghanistan",
    flag: "https://picsum.photos/seed/picsum/200/300",
    languages: [{ name: "demo name" }],
  },
  {
    name: "Åland Islands",
    flag: "https://picsum.photos/seed/picsum/200/300",
    languages: [{ name: "demo name" }],
  },
  {
    name: "Albania",
    flag: "https://picsum.photos/seed/picsum/200/300",
    languages: [{ name: "demo name" }],
  },
  {
    name: "Algeria",
    flag: "https://picsum.photos/seed/picsum/200/300",
    languages: [{ name: "demo name" }],
  },
  {
    name: "American Samoa",
    flag: "https://picsum.photos/seed/picsum/200/300",
    languages: [{ name: "demo name" }],
  },
  {
    name: "AndorrA",
    flag: "https://picsum.photos/seed/picsum/200/300",
    languages: [{ name: "demo name" }],
  },
  {
    name: "Angola",
    flag: "https://picsum.photos/seed/picsum/200/300",
    languages: [{ name: "demo name" }],
  },
  {
    name: "Anguilla",
    flag: "https://picsum.photos/seed/picsum/200/300",
    languages: [{ name: "demo name" }],
  },
  {
    name: "Antarctica",
    flag: "https://picsum.photos/seed/picsum/200/300",
    languages: [{ name: "demo name" }],
  },
];
function CardIssue() {
  return (
    <div>
      <div className="table">
        <Row>
          {countries.map((country) => (
            <Col xs="12" sm="6" lg="4">
              <Card className={`card`}>
                <CardImg
                  className={`icon`}
                  src={country.flag}
                  alt={country.name}
                />
                <CardBody className={`body`}>
                  <CardTitle tag="h5">{country.name}</CardTitle>
                  <div className="tag">
                    {country.languages.map(({ name }) => (
                      <Badge color="secondary">{name}</Badge>
                    ))}
                  </div>
                  <CardText>Test text message here</CardText>
                </CardBody>
              </Card>
            </Col>
          ))}
        </Row>
      </div>
    </div>
  );
}

export default CardIssue;