Vue项目在使用antdv时,引用官网的layout组件时发现布局的展示方式与官网不同,如下图所示。
官网的示例(https://antdv.com/components/layout-cn)
使用时的示例,可以看到Content组件在sider组件的下方,不像官网那样出现在右侧。
antdv的版本问题,不是代码自身的问题。首先要cd Vue项目,然后执行命令npm i --save ant-design-vue@4.1.2。4.1.2版本不行的话再换其他版本试试。
补充一下,关于图中左上角的logo框不显示的问题,可以修改style标签中的代码如下:
.logo {
float: left;
width: 120px;
height: 31px;
margin: 16px 24px 16px 0;
background: rgba(255, 255, 255, 0.3);
}
.ant-row-rtl .logo {
float: right;
margin: 16px 0 16px 24px;
}