很好地对齐网格

Question

我为此感到震惊。我正在使用一个包含两个网格的网格容器。一个带有文本字段，另一个带有复选框。网格拒绝正确对齐。

   <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等等.....