如何解决根据ReactJS中的屏幕大小占用内容空间
我有一个结构,其中包括:
以下是相同的代码段:
import React from "react";
export default function BoxHeader(props) {
return (
<div style={{ marginTop: `${props.Gap}rem` }}>
<div className="Image-wrapper">
<img
className="Profile-Image-Decorator"
alt=""
src="https://i.redd.it/rm6sqwpmesb41.jpg"
></img>
</div>
<div className="Collapsible-Navbar">
{props.Msg.map((element) => (
<div className="Message-Holder">{element}</div>
))}
</div>
</div>
);
}
我想要实现的是减小屏幕尺寸,文本应在图像下方移动,但是我实际得到的是:
通过使用Bootstrap类,我设法制作了一个响应式导航栏...但是我也希望此部分也是如此。有人对它有任何建议吗?
要复制此link
解决方法
使用Row
和Col
组件创建responsive grids。
...
import { Row,Col } from "react-bootstrap";
export default function BoxHeader(props) {
return (
<div style={{ marginTop: `${props.Gap}rem` }}>
<div className="Body-wrapper">
<Row>
<Col sm={12} md={6}>
<div className="Image-wrapper">
<img
className="Profile-Image-Decorator"
alt=""
src="https://i.redd.it/rm6sqwpmesb41.jpg"
></img>
</div>
</Col>
<Col sm={12} md={6}>
<div className="Collapsible-Navbar">
{props.Msg.map((element) => (
<div className="Message-Holder">{element}</div>
))}
</div>
</Col>
</Row>
</div>
</div>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。