样式 div 并排

Question

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

div div div

div     div

div     div

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

我试过像 col-6 那样做中间的，col-4 做顶部的，但是它们到处都是而且很乱。

这是我在不使用 css 的情况下尝试的方法，只是 bootstrap:

<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 文件中包含了 React 组件

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>

输出将如下所示：

样式 div 并排

style div next to and on top of each others

components

styling

reactjs

bootstrap-4