如何使用 react-bootstrap 将卡片组居中？

Question

我刚刚在我的主页上创建了一个卡片组，但我无法将我的组件 CardGroup 居中（见附件）。这就是 sm 模式。但在 lg 模式下，我希望我的卡片彼此相邻。在这两种情况下，它都应该居中。我试图在 CardGroup 或显示器上添加边距（flex，wrap）..没有任何效果^^有什么想法吗？谢谢！两者都没有 CSS :) 主页

// import react-Bootstrap's component(s)
import {
  CardGroup,
  Row,
  Col,
} from 'react-bootstrap';
import SearchBar from 'src/components/SearchBar';
import EventCard from '../EventCard';

const Home = () => (
  <div>
    <SearchBar />
    <div className="list">
      <Row sm={1} md={2} className="g-4">
        <Col className="card-columns">
          <CardGroup>
            <EventCard />
            <EventCard />
            <EventCard />
          </CardGroup>
        </Col>
      </Row>
    </div>
  </div>
);

export default Home;

活动卡片

import './eventCard.scss';
import {
  Card,
  Button,
} from 'react-bootstrap';

const EventCard = () => (
  <Card style={{ width: '18rem' }}>
    <Card.Img variant="top" src="holder.js/100px180" />
    <Card.Body>
      <Card.Title>Card Title</Card.Title>
      <Card.Text>
        Some quick example text to build on the card title and make up the bulk of
        the card's content.
      </Card.Text>
      <Button variant="primary">Go somewhere</Button>
    </Card.Body>
  </Card>
);

export default EventCard;

Answer 1

试试这个

.list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
}

检查 dom 元素是否应用了这些属性，否则尝试添加 !important，因为一些 bootstrap 的 class 覆盖了你的。

参考：https://codesandbox.io/s/gallant-haze-6hxg1s?file=/src/App.js

如何使用 react-bootstrap 将卡片组居中？

How to center a card group with react-bootstrap?

react-bootstrap