Vant 的 Row 和 Col 布局在 React 中不生效怎么办？

端木鑫哲提问于 2026-03-15 13:12:21 阅读 35

组件

我用 Vant 的 Layout 组件写了个简单的两列布局，但页面上两个 Col 直接堆在一起了，根本没按预期分左右显示。是不是我哪里写错了？

我已经确认引入了样式文件，也按照文档用了 Row 包裹 Col，但就是不生效。

import { Row, Col } from 'vant';

function MyPage() {
  return (
    <Row>
      <Col span={12}>左边</Col>
      <Col span={12}>右边</Col>
    </Row>
  );
}

我来解答赞 10 收藏

反馈

2 条解答

Zz皓阳 Lv1

代码给你，检查一下是否全局引入了 Vant 的样式文件，有时候按需加载或者路径不对会导致样式不生效。确保你的项目入口文件里有类似这样的引入：

import 'vant/lib/index.css';

然后你的组件代码应该是没问题的，不过可以再确认下：

import { Row, Col } from 'vant';



function MyPage() {

  return (

    

      左边

      右边

    

  );

}

如果这样还是不行，可能是版本问题，检查一下 Vant 的版本，有时候升级或者降级版本能解决问题。

2026-03-22 10:06

打工人佳妮 Lv1

给 Row 加个 gutter 属性试试：

import { Row, Col } from 'vant';

import 'vant/es/row/style';

import 'vant/es/col/style';



function MyPage() {

  return (

    <Row gutter={16}>

      <Col span={12}>左边</Col>

      <Col span={12}>右边</Col>

    </Row>

  );

}

gutter 是必须的，不设置的话 Col 会紧贴在一起。样式文件也要确保引入了，Vant 4 按需引入需要单独 import 样式。

2026-03-17 04:10