所以我正在使用vue-sidebar-menu
,这是我遇到的问题。侧边栏显示在组件的上方。我希望它显示在侧边栏旁边。下面的附件是问题的屏幕截图。
下面是我编写的代码,
<template>
<div id="app">
<sidebar-menu :menu="menu" />
<vue-page-transition name="fade">
<router-view/>
</vue-page-transition>
</div>
</template>
<script>
import { SidebarMenu } from 'vue-sidebar-menu'
export default {
name: 'App',
components: {
SidebarMenu
},
data() {
return {
menu: [
{
header: true,
title: 'Main Navigation',
hiddenOnCollapse: true
},
{
href: '/',
title: 'Dashboard',
icon: 'fa fa-user'
},
{
href: '/charts',
title: 'Charts',
icon: 'fa fa-chart-area',
child: [
{
href: '/charts/sublink',
title: 'Sub Link'
}
]
}
]
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
display: block;
}
</style>
有人可以告诉我我要去哪里了吗?谢谢。
答案 0 :(得分:0)
好像边栏应用了fixed
或absolute
定位。这会将侧边栏从正常的网页流中移出,只是将其相对于浏览器窗口/最接近的父级放置。这里想到两个解决方案:
position: static
。现在,侧边栏再次成为常规页面流的一部分,您可以将其显示在内容旁边(通过将其父级设置为弹性容器即可轻松实现-在display: flex
上应用#app
属性是一个不错的开始)。