样式 div 彼此相邻和重叠

Question

所以我在 react 中创建了 div，它们基本上是组件，我想像这样使用引导程序设置它们的样式：

div div div

div     div

div     div

所以基本上有 5 个组件，前 3 个组件应该很小，并以较小的边距彼此相邻堆叠。中间两个比较大，在左右div下面，下面和中间div一样。

我曾尝试为中间的 col-6 和顶部的 col-4 做类似的操作，但它们到处都是而且很乱。

这是我在不使用 css 的情况下尝试过的：

<div className="container">
          <div className="row">
          <div className="col-lg-4">
          <Card />

          <ActualLineChart data={systolic}/>

          <ActualLineChart data={Diastolic}/>
          </div>
          </div>
          <div className="row">
            <div className="col-lg-6">
              <div>
          <ActualBarChart data={systolicAndDiastolicAndPulseAverageNew}/>
          </div>
          <ActualScatterChart data={systolicAndDiastolicAndPulseAverageNew}/>
          </div>
          </div>
          <div className="row">
          <div className="col-lg-6">
          <DistributionChart/>

          <DistributionChart />
          </div>
          </div>
          </div>

我该怎么做？

Answer 1

我猜如果您使用的是react-bootstrap，您可能已经拥有installed 它并使用它在您的app.js 文件中包含反应组件

import { Container, Row, Col } from 'React-Bootstrap';

然后你可以简单地将它用于你想要的输出。

<Container>

  <Row>
    <Col xs="4">
     component 1
    </Col>
    <Col xs="4">
     component 2
    </Col>
    <Col xs="4">
     component 3
    </Col>
  </Row>

  <Row className="justify-content-between">
    <Col xs="4">
     component 4
    </Col>
    <Col xs="4">
     component 5
    </Col>
  </Row>

  <Row className="justify-content-between">
    <Col xs="4">
     component 6
    </Col>
    <Col xs="4">
     component 7
    </Col>
  </Row>

</Container>

输出将如下所示：