CSS 代码不适用于 react.js 居中宽度

Question

大家好，我正在尝试使用 react-bootstrap 创建一个 Web 应用程序，我想更改行的宽度并将其居中。我已经制作了 css 和 js 文件，但我无法将行居中。我尝试将我的代码移动到 codesandbox 并且它工作得很好。有人知道为什么吗？

我的代码：

            <Container fluid>
                <Row className="roomfac fontReg">
                    <Col lg={3} className="text-center">
                       <img src="./Images/logofridge.png" alt="Logo 1"/>
                       <h3 className="fontSB">Fridge</h3>
                    </Col>

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

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

                    <Col lg={3} className="text-center">
                       <img src="./Images/logotv.png" alt="Logo 4"/>
                       <h3 className="fontSB">TV</h3>
                    </Col>
                </Row>
            </Container>

我的CSS代码：

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

Answer 1

它在 chrome 和 edge 中也对我有用，请确保您的 css 文件是否正确包含，或者尝试在 jsx 中使用内联 css。

<Row style={{display:"flex",width: "60%",margin: "auto",justifyContent: "center"}} className="fontReg">

CSS 代码不适用于 react.js 居中宽度

CSS Code don't work on react.js centering width

css

reactjs

react-bootstrap