网格列支持不工作的语义UI

Question

我试图在网格中只有一列。但是prop columns = {1}不起作用。并且列不占据窗口的整个宽度。

这是我返回组件的代码。

return (
        <Grid columns={1} textAlign='center' container divided='vertically'>
            <Grid.Column width={6}>
                <Search fluid size='huge'
                    loading = {isLoading}
                    onResultSelect = {this.handleResultSelect}
                    onSearchChange = {this.handleSearchChange}
                    results = {results}
                    value = {value} />
                {this.state.rides}
            </Grid.Column>
            <Grid.Column width={10}>
                <Image src={faker.image.avatar()} style={{ backgroundSize: 'cover' }} />
            </Grid.Column> 
        </Grid>
    );

目前的形象。

Answer 1

事实上，道具的错误使用，columns和width无法合并。在Github上查看this issue，它包含有关Grid的更多信息。此外，您可以查看SUI的official docs。

Answer 2

这是因为您width子组件上的Grid.Column道具。每个子列的宽度应该总计为您指定的列总数。

您可以将多个Grid.Column组件添加到以下布局中，它们将全部显示在一个列中：

<Grid
  columns={1}
  textAlign="center"
  container
  divided="vertically"
>
    <Grid.Column>
      ...
    </Grid.Column>
    <Grid.Column>
      ...
    </Grid.Column>
</Grid>

您想要达到的结果是什么？

我设置了一个示例，可以使用以下网址：https://codesandbox.io/s/pyvqv1k01m