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

【问题标题】：CSS Code don't work on react.js centering widthCSS 代码不适用于 react.js 居中宽度
【发布时间】：2021-12-04 02:55:56
【问题描述】：

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

我的代码：

            <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;
}

【问题讨论】：

您是否通过检查您的 CSS 是否完美应用来检查？
是的，我有，roomfac 类的 display flex 被削减了。

标签： css reactjs react-bootstrap

【解决方案1】：

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

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

【讨论】：

谢谢，当我将其更改为内联 css 时它工作得非常好
有人可以解释为什么在使用“className”时这不起作用吗？
@SamDani 我曾经检查过它，但它对我有用，我认为他/她没有正确包含外部 css。