antd 组件的 div 换行答案

【问题标题】：div wrap for antd componentantd 组件的 div 换行
【发布时间】：2021-09-26 18:36:48
【问题描述】：

您好，我在使用 Antd Space 包装时遇到了一些问题。

对不起，我是 css 的白痴。有没有我可以做的 css 或样式让它换行到下一行？

这是在中

（可以将 Space 组件切换到具有可以进行包装的适当 css 的普通 div）

import { Card, Col, Row, Space } from 'antd';

          
<Space>
                { item.shares.reverse().map((share, i) => (

                   <SinglePost
                     share = {share}
                     height={300}
                     width={300}
                   />

                 ))}
               </Space>

in SinglePost.js

return (
      <Col span={8}>
      <Card style={{ width: props.width, height: props.height }}
        bordered={false}
        >
      <div className="approval-list-sub-box-holder-small">
            <Player
              playsInline
              // src={currentData.content.video}
              fluid={false}
              height="100%"
              width="100%"
            >
       . . .
      </div>
      </Card>
     </Col>
)

这是当前的输出，但正如您所见，它的宽度可能会变得太长并且变得不可见:(

【问题讨论】：

标签： css reactjs antd

【解决方案1】：

添加 wrap = true 似乎有效。出于某种原因，我想我刚刚尝试过但没有。

或者有一个带有 flex-wrap 的 div: wrap;似乎也有效。我现在用空间。

 <Space wrap = {true}>
                { item.shares.reverse().map((share, i) => (

                   <SinglePost
                     share = {share}
                     userId = {props.userId}
                     height={300}
                     width={300}
                   />

                 ))}
               </Space>

【讨论】：