Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
3.8k views
in Technique[技术] by (71.8m points)

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

改成响应式标签不就好了

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...