div 包装 antd 组件

Question

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

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

这在

内

（可以将 Space 组件切换为正常的 div 并使用适当的 css 进行包装）

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>
)

这是当前的输出，但如您所见，它的宽度可能会变得太长而无法查看:(

Answer 1

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

或者有一个 div with flex-wrap: wrap;似乎也有效。我暂时选择 space。

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

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

                 ))}
               </Space>

div 包装 antd 组件

div wrap for antd component

css

reactjs

antd