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>

我该怎么做？

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样式彼此相邻

1 个答案: