React Grid：列内区块的格式调整问题

嘿，这问题我熟！你现在遇到的是Bootstrap网格系统默认样式导致的——每个Col组件默认带有左右内边距（padding-left和padding-right各15px），所以两个Col之间会形成30px的间隙，而Col内部的section因为没有额外间距，所以是贴合的。要实现所有框紧密排列，有几个简单靠谱的办法：

方法1：使用Row的noGutters属性（最推荐） #

React-Bootstrap的Row组件自带noGutters属性，它会自动移除Row的负外边距，同时清除所有子Col的左右内边距，这样列之间的间隙就消失了，所有section自然会紧密排列。

修改后的代码如下：

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

方法2：自定义CSS移除Col的内边距 #

如果你不想影响整个Row的样式，可以给需要消除间隙的Col添加自定义类，覆盖默认的padding：

首先定义CSS：

.no-padding-col {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

然后修改组件代码：

<Grid fluid={true}>
  <Row>
    <Col md={4} className="no-padding-col">
      <section> // my component </section>
      <section> // my component </section>
    </Col>
    <Col md={4} className="no-padding-col">
      <section> // my component </section>
      <section> // my component </section>
    </Col>
  </Row>
</Grid>

小提示：使用!important是为了确保覆盖Bootstrap的默认样式，如果你的CSS优先级足够高（比如用CSS Modules或者内联样式），也可以不用它。

方法3：调整section的外边距（备选） #

如果只是想让section之间完全贴合，也可以给section设置负的外边距，但这个方法不如前两个直接，因为需要依赖Bootstrap的默认padding值，一旦版本更新样式变化，布局可能会出问题：

section {
  margin-left: -15px;
  margin-right: -15px;
}

个人不太推荐这个方法，稳定性不如前两个方案。

选方法1或者2都能轻松解决你的问题，试试吧！

内容的提问来源于stack exchange，提问作者Chris