Блог

Главная - Вопросы по программированию - Как выровнять 6 карт и 3 карты в одном ряду

Как выровнять 6 карт и 3 карты в одном ряду

#reactjs #react-bootstrap #card

#reactjs #react-bootstrap #карта

Вопрос:

Сейчас у меня 6 карт, и я хочу выровнять 3 карты в строке, чтобы у нас было всего 2 строки.

Мой код здесь https://codesandbox.io/s/card-tykr9?file=/src/App.js

Может кто-нибудь зайти за помощью?

Комментарии:

1. Здесь не место для такого рода вопросов.

Ответ №1:

Вы можете использовать flexbox вместо grid layout для достижения того же результата.

 import React from "react";
import "./styles.css";

import {
  Card,
  CardImg,
  CardText,
  CardBody,
  CardTitle,
  CardFooter
} from "reactstrap";

const css = {
  grid: {
    display: "flex",
    flexWrap: "wrap",
    justifyContent: "center"
  }
};

export default function App() {
  const data = [
    {
      avatar: "https://placehold.it/269x200",
      text: "Last updated 1 ago",
      title: "3D",
      cardText: "web applicatio"
    },
    {
      avatar: "https://placehold.it/269x200",
      text: "Last updated 4 ago",
      title: "3D",
      cardText: "web applicatio"
    },
    {
      avatar: "https://placehold.it/269x200",
      text: "Last updated 6 ago",
      title: "3D",
      cardText: "web applicatio"
    },
    {
      avatar: "https://placehold.it/269x200",
      text: "Last updated 1 ago",
      title: "3D",
      cardText: "web applicatio"
    },
    {
      avatar: "https://placehold.it/269x200",
      text: "Last updated 4 ago",
      title: "3D",
      cardText: "web applicatio"
    },
    {
      avatar: "https://placehold.it/269x200",
      text: "Last updated 6 ago",
      title: "3D",
      cardText: "web applicatio"
    },
    {
      avatar: "https://placehold.it/269x200",
      text: "Last updated 4 ago",
      title: "3D",
      cardText: "web applicatio"
    },
    {
      avatar: "https://placehold.it/269x200",
      text: "Last updated 6 ago",
      title: "3D",
      cardText: "web applicatio"
    }
  ];
  return (
    <div style={css.grid}>
      {data.map(({ avatar, title, text, cardText }, index) => (
        <div style={{ margin: 0, width: "33%" }}>
          <Card style={{ margin: 5 }}>
            <CardImg top width="100%" src={avatar} alt="Card image cap" />
            <CardBody style={{ padding: 15 }}>
              <CardTitle style={{ fontWeight: "bold" }}>{title}</CardTitle>
              <CardText>{cardText}</CardText>
            </CardBody>
            <CardFooter style={{ padding: 15 }}>
              <small className="text-muted">{text}</small>
            </CardFooter>
          </Card>
        </div>
      ))}
    </div>
  );
}

Code Sandbox

Комментарии:

1. спасибо за вашу помощь. Однако, как я могу получить изображение из локальной папки в «аватар» вместо ссылки?

2. Вы можете сохранить необходимые изображения в папке проекта и указать относительный путь к этим изображениям вместо ссылки на аватар.

3. Я пробовал, но это не работает, не могли бы вы посмотреть здесь codesandbox.io/s/card-forked-fbt1f?file=/src/App.js ?

4. сохраните ваши изображения в общую папку, похоже, есть какая-то проблема с переменной среды reactjs или что-то в этом роде, также мы должны удалить <React.StrictMode> из index.js

5. Рабочий пример: codesandbox.io/s/card-forked-xlym6?file=/src/App.js

Ответ №2:

Проверьте этот код. Я реализую этот код в bootstrap4.

     <div class="container">
    <div class="row ">
        <h4>we can use "card-deck" for same height and "card-group" to remove margins and padding between cards</h4>
        <div class="card col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4 m">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>

        <div class="card col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>

        <div class="card col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4">
            <div class="card-body">
                <h5 class="card-title" id="harry">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>

        <div class="card col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4">
            <div class="card-body">
                <h5 class="card-title" id="harry">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>

        <div class="card col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4">
            <div class="card-body">
                <h5 class="card-title" id="harry">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>

        <div class="card col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4">
            <div class="card-body">
                <h5 class="card-title" id="harry">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>
    </div>
</div>

Результат:
Вывод приведенного выше кода