Ant-design: 等高物品

没看懂， a lot of layout issues是什么意思？

行高 === max(Col height) 所以不会带来布局问题。 https://codesandbox.io/s/my8p6vk7wj

我的意思是添加一个功能，使行内的列（和其他元素）等高。

您的示例目前如下所示：

但是最好添加<Row equal-heights>并且内容如下所示：

我明白了……看起来很合理。

也许打电话vertical-fill更好？

我认为我们不需要这个，孩子的身高应该由孩子的内容或风格决定。

@yutingzhao1991 @ddcat1115我遇到了同样的问题。 任何有解决方案？

关于这个问题的任何解决方案？

不

使用 type="flex" 启用 flexbox 的行并将列内容的高度设置为 100% 对我来说效果很好。

<Row gutter={16} type="flex">

https://ant.design/components/grid/#Row

谢谢阿尔文。 设置 type='flux' 对我有用。 但是不要忘记将列内容的高度设置为 100%。 不是列本身，它应该是列下的组件。

我的网格中有卡片。 将行类型设置为“flux”，将卡片的高度设置为“100%”（如本主题中所建议的），因为每张卡片都填满了该行的整个高度。 但是，卡片的操作栏不再位于行的底部。 它看起来像这样：

如何在网格中放置扩展到行高的卡片，并在行底部使用卡片操作按钮？

在 Meta 标签中，您可以添加一个类并指定您的固定高度。 喜欢

<Card>
 <Meta  
  className="cardBodyStyle"
  title={key.title}
  description={key.description}
 />
</Card>

css：

.cardBodyStyle {
    height: 100px;
}

使用 type="flex" 启用 flexbox 的行并将列内容的高度设置为 100% 对我来说效果很好。

<Row gutter={16} type="flex">

https://ant.design/components/grid/#Row

这是正确的方法

尝试这种方法将子节点拉伸到所有可用空间（垂直和水平）

<Row gutter={16}>
    <Col span={12} style={{display: 'flex'}}>
        <Card style={{flex:1}}>
            1<br/>2<br/>3
        </Card>
    </Col>
    <Col span={12} style={{display: 'flex'}}>
        <Card style={{flex:1}}>
            1<br/>2
        </Card>
    </Col>
</Row>

对我来说，这些都不起作用。 解决方案是删除height: 100%并在 Col 标签上设置display: inline-flex和align-self: stretch 。 如果 Col 中有多个元素，则需要将它们包装在另一个容器中，以便 Col 只有一个子元素。