стиль div рядом и поверх друг друга

Question

поэтому у меня есть 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 файл, используя этот

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>

Результат будет выглядеть так: