• 1
  • 新人请关照

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
看了文档,没有看到解决类似需求的方法,或者可能小弟愚笨,看不出来,已经琢磨了一整天了
想请教各位大佬前辈,希望大家不吝赐教,非常感谢🙏

阅读 149
评论
    1 个回答
    • 488

    改成响应式标签不就好了

    <Card>
        <Row>
            <Col xs={24} md={10}>
              板块1
            </Col>
            <Col xs={24} md={14} >
              板块2
            </Col>
        </Row>
        <Row>
            <Col xs={24} md={8}>
              模块1
            </Col>
            <Col xs={24} md={8}>
              模块2
            </Col>
            <Col xs={24} md={8}>
              模块3
            </Col>
        </Row>
    </Card>
      撰写回答

      登录后参与交流、获取后续更新提醒

      相似问题
      推荐文章