在ReactJS中根据屏幕尺寸占用内容space

Question

我的结构包括：

水平堆叠的图像与垂直堆叠的文本数组，如下所示：

这是相同的片段：

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

Answer 1

使用 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>
  );
}

在ReactJS中根据屏幕尺寸占用内容space

Occupy content space based on the screen size in ReactJS

reactjs

reactstrap