react bootstrap 如何在较小的屏幕上将列转换为行？

Question

您好，我是新来的反应（在这方面对 css 不是很好），我正在尝试创建一个投资组合网站。对于桌面屏幕尺寸 (16:9)，我有两列，但是当我放大时，它继续保持 2 列（如预期的那样）。有人会指导我将列更改为行，以便我在较小的屏幕上有两行而不是两列吗？我怀疑我在这里可能不太了解引导程序。

return (
        <div className="App">
            <Container fluid={true} className="god-container" style={{paddingLeft: 0, paddingRight: 0}}>
                <Row className="god-row" style={{marginRight: 0, marginLeft: 0}}>
                    <Col xs="12" md="3" className="sidebar" style={{paddingLeft: 0, paddingRight: 0}}> 
                        <About></About>
                    </Col>
                    <Col xs="12" md="9" className="not-sidebar">
                        <ProjectSection projects={projects}/>
                    </Col>
                </Row>
            </Container>
        </div>
    );

Answer 1

我刚刚检查了您的代码，并且 Bootstrap 网格很好。有一个元素about 具有固定的定位和 25% 的宽度，这迫使它覆盖 Bootstrap 网格并即使在小型设备中也保持在两列中。我不认为你会需要那个代码，但是如果你需要它，那么你可以使用下面的代码来定位更小的设备。

@media screen and (max-width: 767px) {
    .about {
      width: unset;
      position: unset;
    }
}

现场演示： https://n1zw2.csb.app/