reactjs - 样式 div 彼此相邻和重叠

Question

所以我在 react 中创建了 div，它们基本上是组件，我想使用 bootstrap 来设置它们的样式，如下所示：

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>

我该怎么做？

标签： reactjsbootstrap-4componentsstyling

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>

输出将如下所示：