很好地对齐网格

Question

我突然对此不以为然。我正在使用一个Grid容器，它包含两个网格。一个带有文本字段，另一个带有复选框。网格拒绝正确对齐。

   <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}，那么两个网格相互重叠（如果它们位于不同的网格上，它们怎么可能？）我需要以某种方式弥补差距这两个网格之间的较小..我怎么能这样做？

重叠：qazxsw poi

不重叠：qazxsw poi

Answer 1

请更新网格项目

至

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