Changhong

Changhong 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

Changhong 提出了问题 · 2020-12-27

antd<Card><Row><Col>响应式布局问题

我有两行Row在Card里面,代码如下

<Card>
    <Row>
        <Col span={10}>
          板块1
        </Col>
        <Col span={14} >
          板块2
        </Col>
    </Row>
    <Row>
        <Col span={8}>
          模块1
        </Col>
        <Col span={8}>
          模块2
        </Col>
        <Col span={8}>
          模块3
        </Col>
    </Row>
</Card>

在网页端正常显示效果如下
2021608999022_.pic.jpg
但是在手机端是这样的
2031608999138_.pic.jpg
就是说还是保持原来的布局,但是会缩到内容溢出<Card>
我想实现下面的效果,就是让Col在手机端的时候直接换行
2041608999239_.pic.jpg
看了文档,没有看到解决类似需求的方法,或者可能小弟愚笨,看不出来,已经琢磨了一整天了
想请教各位大佬前辈,希望大家不吝赐教,非常感谢🙏

关注 2 回答 1

Changhong 提出了问题 · 2020-12-27

antd<Card><Row><Col>响应式布局问题

我有两行Row在Card里面,代码如下

<Card>
    <Row>
        <Col span={10}>
          板块1
        </Col>
        <Col span={14} >
          板块2
        </Col>
    </Row>
    <Row>
        <Col span={8}>
          模块1
        </Col>
        <Col span={8}>
          模块2
        </Col>
        <Col span={8}>
          模块3
        </Col>
    </Row>
</Card>

在网页端正常显示效果如下
2021608999022_.pic.jpg
但是在手机端是这样的
2031608999138_.pic.jpg
就是说还是保持原来的布局,但是会缩到内容溢出<Card>
我想实现下面的效果,就是让Col在手机端的时候直接换行
2041608999239_.pic.jpg
看了文档,没有看到解决类似需求的方法,或者可能小弟愚笨,看不出来,已经琢磨了一整天了
想请教各位大佬前辈,希望大家不吝赐教,非常感谢🙏

关注 2 回答 1

Changhong 关注了用户 · 2020-12-26

王治治 @wangdazhi_sifou

学者所志至大,犹恐所得浅。

关注 5156

Changhong 关注了专栏 · 2020-12-26

思否编程 技术分享

思否编程技术内容分享

关注 5572

Changhong 关注了专栏 · 2020-12-26

程序员哆啦A梦

达达前端技术社群:囊括前端Vue、JavaScript、数据结构与算法、实战演练、Node全栈一线技术,紧跟业界发展步伐,一个热爱前端的达达程序员。

关注 9908

Changhong 关注了专栏 · 2020-12-26

SegmentFault 行业快讯

第一时间为开发者提供行业相关的实时热点资讯

关注 53525

Changhong 关注了专栏 · 2020-12-26

前端开发那些事儿

前端知识:HTML、CSS、JS、React,nodejs、Chrome、数据结构与算法,计算机网络等精华知识分享交流。

关注 6203

Changhong 关注了专栏 · 2020-12-26

葡萄城控件技术团队

葡萄城控件技术团队,分享技术文章

关注 5033

Changhong 关注了专栏 · 2020-12-26

大前端

学习 分享

关注 7303

Changhong 关注了专栏 · 2020-12-26

K8S生态

Container, Docker, Go, Kubernetes, Python, Vim; 微信公众号: MoeLove

关注 9637

认证与成就

  • 获得 0 次点赞
  • 获得 1 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 1 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2020-12-26
个人主页被 50 人浏览