Ant Design：如何移除每行末尾的Gutter间距

要让文本框所在行完全适配父容器宽度、消除Gutter导致的末尾空白，可按以下两种方式处理：

方式一：直接移除内部Row的Gutter间距 #

如果不需要文本框之间的间距，直接给承载三个输入框的内层Row添加gutter={0}属性，彻底消除所有间距：

<Row>
  <Col xs={{span: 24}}>
    {/* 给内层Row添加gutter={0} */}
    <Row gutter={0}>
      <Col xs={{span: 24}} md={{span: 8}}>
        <Input/>
      </Col>
      <Col xs={{span: 24}} md={{span: 8}}>
        <Input/>
      </Col>
      <Col xs={{span: 24}} md={{span: 8}}>
        <DateRangePicker/>
      </Col>
    </Row>
  </Col>
  <Col xs={{span: 24}}>
    <Button/>
  </Col>
</Row>

方式二：保留列间距但消除左右边距 #

如果需要文本框之间保留间距，但要让整行完全贴合父容器左右，可以利用Ant Design的gutter配置配合样式调整：

1. 给内层Row设置列间距（比如gutter={[16, 0]}表示水平间距16px）
2. 给内层Row添加style={{ margin: 0, padding: '0 8px' }}，抵消默认的负边距并让左右对齐

<Row>
  <Col xs={{span: 24}}>
    <Row gutter={[16, 0]} style={{ margin: 0, padding: '0 8px' }}>
      <Col xs={{span: 24}} md={{span: 8}}>
        <Input/>
      </Col>
      <Col xs={{span: 24}} md={{span: 8}}>
        <Input/>
      </Col>
      <Col xs={{span: 24}} md={{span: 8}}>
        <DateRangePicker/>
      </Col>
    </Row>
  </Col>
  <Col xs={{span: 24}}>
    <Button/>
  </Col>
</Row>

原理说明：Ant Design的Row gutter是通过给Col添加左右padding、给Row添加负左右margin实现间距的。如果要消除左右空白，要么直接去掉gutter，要么手动抵消负margin并调整padding，让整行贴合父容器。

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