很好地对齐网格

Question

我为此头疼。我正在使用一个 Grid 容器，其中包含两个网格。一个带有 textfield ，一个带有 Checkbox 。网格拒绝正确对齐。

   <Grid container>
    <Grid item sm={2}>
     <TextField
      id="filter"
      label={labels.filterHelperText}
      value={this.props.brokersListFilter}
      onChange={this.onFilterChange}
      InputProps={{
        startAdornment: (
          <InputAdornment position="start">
            <FilterListIcon />
          </InputAdornment>
        )
      }}
    />
    </Grid>
    <Grid item sm={1}>
        <FormControlLabel
          className={this.props.classes.checkbox}
          control={
            <Checkbox
              checked={this.props.activeAgentsOnly}
              onChange={this.props.setActiveAgentsOnly}
              color="primary"
            />
          }
          label={labels.isActive}
        />
      </Grid>
     </Grid>

使用此代码，间距太大...如果我将第一个内部网格更改为 sm={1} ，那么两个网格相互重叠（如果它们在不同的网格上怎么可能？）我需要以某种方式缩小这两个网格之间的差距.. 我该怎么做？

重叠：

不重叠：

Answer 1

请更新网格项目，如

<Grid item sm={2}>

到

<Grid item sm={6}>
<Grid item sm={6}>

应该等于 12. 8+4 或 6+6 等等.....