reactjs 如何在网站上以均匀间距居中引导卡？

unhi4e5o  于 12个月前  发布在  React
关注(0)|答案(1)|浏览(98)

我正在使用Bootstrap开发一个React应用程序，我在让Bootstrap Cards在我的网站上以均匀的间距居中方面遇到了挑战。一排三张卡片之间的空间太高了，而且卡片在网站上的居中位置也不正确。我试过使用Bootstrap Grid Layout，但它似乎没有提供想要的结果。
下面是我用于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 Grid Layout或其他推荐的方法来实现这一点吗？
任何帮助将不胜感激！提前感谢。
我尝试使用ReactJS Bootstrap Grid布局，它不起作用

reactjs

1条答案

按热度按时间
qvtsj1bj

qvtsj1bj1#

您可以考虑不设置Row的列数。这将允许内部Col组件的大小为auto：
将列值（对于任何断点大小）设置为auto，以根据列内容的自然宽度调整列的大小。
这样就允许列（以及内部的Card s）服从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 grid自己创建，而不是使用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/>);

x

.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>

的一个字符串

赞(0）分享  回复(0）举报  12个月前
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com