网格和蚂蚁设计答案

【问题标题】：Grid and Ant Design网格和蚂蚁设计
【发布时间】：2019-04-06 10:16:43
【问题描述】：

我想按每行第 3 列对卡片帖子进行排序。但是当我在 style={{""} 中输入代码时不起作用。

然后，我使用Ant-Design。请帮助我该如何解决这个问题？

props.list.map(result => (
    <div key={result.id}>
        <Row className="gutter-example" gutter={16}>
            <Col className="gutter-row" span={6}>
            <Card hoverable style={{ width: 200 }} cover={ result.volumeInfo.imageLinks ? <img alt="BookCover" src={result.volumeInfo.imageLinks.thumbnail} />:
            <img alt="Alternative_Cover" src={AlterNative} />
            }
            >
            <Meta title={result.volumeInfo.title} description={ <a href={result.volumeInfo.infoLink}>
            {result.volumeInfo.infoLink}
            </a>
            }
            />
            </Card>
            </Col>
        </Row>
    </div>

【问题讨论】：

这里有点猜想。问题是Card.Add Card到Col，span不起作用。
哈哈感谢您的意见，但它有效;;

标签： reactjs antd

【解决方案1】：

我不使用 Ant Design，但我认为 <Row /> 组件是包装器，它应该包装你所有的 <Col />

因此，如果您想在每个项目中渲染 3 个项目，则应在 <Row /> 组件中渲染所有 <Col span={6} />。每个<Row /> 都是平均全宽容器。

<Row>
     {list.map(item => <Col key={item.id} span={6}><Card /></Col>)}
</Row>

【讨论】：

【解决方案2】：

您可以使用列表组件并将 grid={{gutter:16,column:3}} 添加到它的道具中

【讨论】：