如何解决ReactBootstrap flexbox不会延伸到内容高度
我无法使此flexbox列的高度等于内容的高度。
当窗口小于576像素时,它会更改,因此每行仅显示一列。但是,当发生这种情况时,其中一列会变大(蓝绿色)。它的高度是父div的一半,但是应该是其内容的高度。如果设置最大高度,则不会重新调整下面的内容,缩小的区域将变为白色。
如果我改变蓝绿色区域的最大高度,则先前覆盖的区域将变为空白。
代码
function App(props) {
return (
<div className="App">
<Container >
<Row style={{backgroundColor: "orange"}}>
<Col>
<Header/>
</Col>
</Row>
<Row style={{flex: 1}}>
<Col md={2} className="menuClass" style={{backgroundColor: "teal"}}>
<Menu />
</Col>
<Col md={10} style={{backgroundColor: "lightblue"}}>
<p className="abc">abc</p>
<Content />
</Col>
</Row>
<Row>
<Col style={{backgroundColor: "darkgreen"}}>
<Footer />
</Col>
</Row>
</Container>
</div>
);
}
CSS 如果我使用更改最大宽度的代码,则其覆盖的区域将变为白色,而浅蓝色的div将保留在其位置
.container {
min-height: 100vh;
display: flex;
flex-direction: column;
}
@media (max-width: 570px) {
.abc {
max-width: 200px;
}
}
这里的菜单(茶色)太大
解决方法
<Menu />
组件是否也有来自React Bootstrap的容器?如果是这样,它也可以使用.container
类,并且高度为100vh。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。