React Grid：格式化列内的节

Question

假设我有：

<Grid fluid={true}>
  <Row>
    <Col md={4}>
       <section>
          // my component
       </section>
       <section>
          // my component
       </section>
    </Col>
    <Col md={4}>
       <section>
         // my component
       </section>
       <section>
         // my component
       </section>
     </Col>

在这种情况下，我在浏览器上看到两组正在触摸的灰色虚线框，每组之间有一个间隙。

我想要做的就是让这些盒子紧密包装，它们之间只有很小的间隙。然后，我想用颜色填写它们。我如何使用反应网格部分进行此操作？

Answer 1

啊，您希望将每个部分放在一行中均匀分布的列中：

<Grid fluid>
    <Row>
        <Col md={3}>
            <section>
                // my component
            </section>
        </Col>
        <Col md={3}>
            <section>
                // my component
            </section>
        </Col>
        <Col md={3}>
            <section>
                // my component
            </section>
        </Col>
        <Col md={3}>
            <section>
                // my component
            </section>
        </Col>
    </Row>
</Grid>

react-grid使用12网格系统，因此您希望4列平均分布在12个部分中。所以4/12 = 3.你需要4列，每列伸展3个部分。