如何在 react-bootstrap 中将容器居中？

Posted 2023-02-22

【中文标题】如何在 react-bootstrap 中将容器居中？

【英文标题】：How to center a container in react-bootstrap?

【发布时间】：2021-12-01 16:35:38

【问题描述】：

我正在使用 react-bootstrap 开发一个网站，并且我有一个容器，其宽度需要更改为 60%，并且仍然居中。我更改了宽度，但找不到使容器居中的方法。我该怎么做？

这是我的代码：

import Row, Col, Container, Button from "react-bootstrap"
import '../CSS/Room.css'

const Room = () => 
    return (
        <>
            <Container fluid>
                <Row className="roomfac fontReg">
                    <Col lg=3 className="text-center">
                       <img src="./Images/logofridge.png" />
                       <h3 className="fontSB">Fridge</h3>
                    </Col>

                    <Col lg=3 className="text-center">
                       <img src="./Images/logoAC.png" />
                       <h3 className="fontSB">AC</h3>
                    </Col>

                    <Col lg=3 className="text-center">
                       <img src="./Images/logowifi2.png" />
                       <h3 className="fontSB">Wifi</h3>
                    </Col>

                    <Col lg=3 className="text-center">
                       <img src="./Images/logotv.png" />
                       <h3 className="fontSB">TV</h3>
                    </Col>
                </Row>
            </Container>
        </>
    )


export default Room

这是我的 CSS：

.roomfac 
    display: flex;
    widtH: 60%;
    margin: auto;

【参考方案1】：

试试这个：

.roomfac
    display: flex;
    width: 60%;
    justify-content:center
    margin:0 auto;

【讨论】：

请再看一遍编辑后的答案

是的，现在好多了。

也没有用

这是不可能的……你能分享一下 fontReg 类和 Room 组件的渲染位置吗？因为代码和框中的这些属性正在工作

【参考方案2】：

试试这个 CSS 让你的容器居中。

.roomfac 
    display: flex;
    width: 100%;
    max-width: 60%;
    margin: 0 auto;
    justify-content: center;