如何将Bootstrap卡片在网站上以均匀间距居中？

问题描述 投票：0回答：1

我正在使用 Bootstrap 开发 React 应用程序，我面临着让 Bootstrap 卡在我的网站上以均匀间距居中的挑战。连续三张卡片之间的间距太高，而且卡片在网站上没有正确居中。我尝试过使用 Bootstrap 网格布局，但它似乎没有提供所需的结果。

下面是我用于 Card 组件的代码：

import Card from 'react-bootstrap/Card';
import Button from 'react-bootstrap/Button';
import ListGroup from 'react-bootstrap/ListGroup';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import './Card.css';

function KitchenSinkExample() {
    return (
        <Container fluid className="mt-4 text-center">
            <Row xs={1} md={3} className="g-4 justify-content-center">
                {Array.from({ length: 6 }).map((_, idx) => (
                    <Col key={idx} className="mb-4">
                        <Card style={{ width: '18rem' }}>
                            <Card.Img variant="top" src={`holder.js/100px180?text=Image cap ${idx + 1}`} className='card-img-top' />
                            <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>
                            </Card.Body>
                            <ListGroup className="list-group-flush">
                                <ListGroup.Item>Cras justo odio</ListGroup.Item>
                                <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
                                <ListGroup.Item>Vestibulum at eros</ListGroup.Item>
                            </ListGroup>
                            <Card.Body>
                                <Button variant="primary" className='chat-button'>Go somewhere</Button>
                            </Card.Body>
                        </Card>
                    </Col>
                ))}
            </Row>
        </Container>
    );
}

export default KitchenSinkExample;

这是相应的CSS：

.btn-primary {
    background-color: #0074cc !important;
    color: white !important;
    padding: 10px !important;
    border-radius: 20px !important;
    width: 65% !important;
    font-size: 20px !important;
    margin-bottom: 10px;
}

.card {
    padding: 1.5em .5 .5em;
    text-align: center;
    box-shadow: 0 5px 10px rgba(0, 123, 255, 0.2);
    border-radius: 2em;
}

.card-title {
    font-weight: bold;
    font-size: 1.5em;
}

.card-img-top {
    width: 60%;
    border-radius: 50%;
    padding: 1em;
    margin: 0 auto;
    box-shadow: 0 5px 10px rgba(0, 123, 255, 0.2);
}

.chat-button:hover {
    background-color: #fff !important;
    color: #0074cc !important;
}

尽管我付出了努力，卡片仍未按预期显示。我希望它们位于页面中央，且间距相等。有人可以指导我如何使用 Bootstrap 网格布局或任何其他推荐的方法来实现这一目标吗？

任何帮助将不胜感激！预先感谢。

我尝试使用 ReactJS Bootstrap 网格布局，但没有成功

reactjs bootstrap-4 grid grid-layout bootstrap-cards
1个回答
0
投票

您可以考虑不设置

Row
的列数。然后，这允许调整内部 
Col
组件的大小 
auto
:

将列值（对于任何断点大小）设置为 

auto
，以根据内容的自然宽度调整列的大小。

然后，这允许列（以及内部 

Card
）受到来自 
justify-content: center
类的 
justify-content-center
的约束：

const {
  Card,
  Button,
  ListGroup,
  Container,
  Row,
  Col
} = ReactBootstrap

function KitchenSinkExample() {
    return (
        <Container fluid className="mt-4 text-center">
            <Row xs={1} className="g-4 justify-content-center">
                {Array.from({ length: 6 }).map((_, idx) => (
                    <Col key={idx} className="mb-4" xs="auto" sm="auto">
                        <Card style={{ width: '18rem' }}>
                            <Card.Img variant="top" src={`https://placehold.co/100x180?text=Image+cap+${idx + 1}`}className='card-img-top' />
                            <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>
                            </Card.Body>
                            <ListGroup className="list-group-flush">
                                <ListGroup.Item>Cras justo odio</ListGroup.Item>
                                <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
                                <ListGroup.Item>Vestibulum at eros</ListGroup.Item>
                            </ListGroup>
                            <Card.Body>
                                <Button variant="primary" className='chat-button'>Go somewhere</Button>
                            </Card.Body>
                        </Card>
                    </Col>
                ))}
            </Row>
        </Container>
    );
}

ReactDOM.createRoot(document.getElementById('app')).render(<KitchenSinkExample/>);
.btn-primary {
    background-color: #0074cc !important;
    color: white !important;
    padding: 10px !important;
    border-radius: 20px !important;
    width: 65% !important;
    font-size: 20px !important;
    margin-bottom: 10px;
}

.card {
    padding: 1.5em .5 .5em;
    text-align: center;
    box-shadow: 0 5px 10px rgba(0, 123, 255, 0.2);
    border-radius: 2em;
}

.card-title {
    font-weight: bold;
    font-size: 1.5em;
}

.card-img-top {
    width: 60%;
    border-radius: 50%;
    padding: 1em;
    margin: 0 auto;
    box-shadow: 0 5px 10px rgba(0, 123, 255, 0.2);
}

.chat-button:hover {
    background-color: #fff !important;
    color: #0074cc !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/2.9.2/react-bootstrap.min.js" integrity="sha512-wNDLsNGwX8AMZLwX3fEvh6vc7dicHVKzmz1TbDAv2ssoh7i7Hb8qy+FuOsHDeRr5PLRhvf9CQwNy/7ljOllTcw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" integrity="sha512-b2QcS5SsA8tZodcDtGRELiGv5SaKSk1vDHDaQRda0htPYWZ6046lr3kJ5bAAQdpV2mmA/4v0wQF9MyU6/pDIAg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div id="app"></div>

否则，对于居中的 3×3 网格，您可以使用 CSS 网格自行创建，而不是使用 Bootstrap 布局组件：

const {
  Card,
  Button,
  ListGroup,
  Container,
  Row,
  Col
} = ReactBootstrap

function KitchenSinkExample() {
    return (
        <Container fluid className="mt-4 text-center">
            <div className="grid">
                {Array.from({ length: 6 }).map((_, idx) => (
                    <Card style={{ width: '18rem' }}>
                        <Card.Img variant="top" src={`https://placehold.co/100x180?text=Image+cap+${idx + 1}`}className='card-img-top' />
                        <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>
                        </Card.Body>
                        <ListGroup className="list-group-flush">
                            <ListGroup.Item>Cras justo odio</ListGroup.Item>
                            <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
                            <ListGroup.Item>Vestibulum at eros</ListGroup.Item>
                        </ListGroup>
                        <Card.Body>
                            <Button variant="primary" className='chat-button'>Go somewhere</Button>
                        </Card.Body>
                    </Card>
                ))}
            </div>
        </Container>
    );
}

ReactDOM.createRoot(document.getElementById('app')).render(<KitchenSinkExample/>);
.grid {
  display: grid;
  grid-template-columns: 18rem;
  gap: 1.5rem;
  justify-content: center;
}

@media (min-width: 576px) {
  .grid {
    grid-template-columns: repeat(2, 18rem);
  }
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(3, 18rem);
  }
}

.btn-primary {
    background-color: #0074cc !important;
    color: white !important;
    padding: 10px !important;
    border-radius: 20px !important;
    width: 65% !important;
    font-size: 20px !important;
    margin-bottom: 10px;
}

.card {
    padding: 1.5em .5 .5em;
    text-align: center;
    box-shadow: 0 5px 10px rgba(0, 123, 255, 0.2);
    border-radius: 2em;
}

.card-title {
    font-weight: bold;
    font-size: 1.5em;
}

.card-img-top {
    width: 60%;
    border-radius: 50%;
    padding: 1em;
    margin: 0 auto;
    box-shadow: 0 5px 10px rgba(0, 123, 255, 0.2);
}

.chat-button:hover {
    background-color: #fff !important;
    color: #0074cc !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/2.9.2/react-bootstrap.min.js" integrity="sha512-wNDLsNGwX8AMZLwX3fEvh6vc7dicHVKzmz1TbDAv2ssoh7i7Hb8qy+FuOsHDeRr5PLRhvf9CQwNy/7ljOllTcw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" integrity="sha512-b2QcS5SsA8tZodcDtGRELiGv5SaKSk1vDHDaQRda0htPYWZ6046lr3kJ5bAAQdpV2mmA/4v0wQF9MyU6/pDIAg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div id="app"></div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.