ReactJS中根据屏幕大小占用内容空间答案

【问题标题】：Occupy content space based on the screen size in ReactJSReactJS中根据屏幕大小占用内容空间
【发布时间】：2020-12-25 01:49:51
【问题描述】：

我的结构包括：

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

这是相同的sn-p：

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

【问题讨论】：

标签： reactjs reactstrap

【解决方案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>
  );
}

【讨论】：