javascript - 语义 ui react 表 GridView float 卡问题

Question

我想使用语义 ui 用卡片做 3 列。但是当它在平板电脑 View 上时我有问题。该卡是 float 的，但在桌面和移动设备上运行良好。

要预览将其调整为表格大小 https://8z7nv1olql.codesandbox.io/

或者我只是在这里附上图片

export const Item = ({
  _id,
  title
}) => (
  <Grid.Column>
    <Card
      header={title.toString()}
      className='item'
    />
  </Grid.Column>
)

class App extends React.Component {
  constructor() {
    super()

    this.state = {
      data: [...Array(12).keys()]
    }
  }
  render() {
    const { data } = this.state

    console.log(data)

    return(
      <Container>
      <br />
      <Grid stackable doubling columns={3} >
        {chunk(data, 3).map(o => {
          return (<Grid.Row>{o.map(o2 => {
            return (
              <Item title={o2} />
            )
          })}</Grid.Row>)
        })}
      </Grid>
      </Container>
    )
  }
}

完整代码: https://codesandbox.io/s/8z7nv1olql

我在上面创建了一个缩影，而不是抛出我的大元素的代码。

Answer 1

取消类(class)加倍。

<Grid stackable columns={3} >
  {chunk(data, 3).map(o => {
    return (<Grid.Row>{o.map(o2 => {
      return (
        <Item title={o2} />
      )
    })}</Grid.Row>)
  })}
</Grid>