时间戳

首页 > 解决方案 > CSS 代码不适用于 react.js 居中宽度

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

问题描述

大家好，我正在尝试使用 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;
}

标签： cssreactjsreact-bootstrap

解决方案

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

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

推荐阅读