Vue-使组件显示在侧边栏旁边

Question

所以我正在使用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>

有人可以告诉我我要去哪里了吗？谢谢。

Answer 1

好像边栏应用了fixed或absolute定位。这会将侧边栏从正常的网页流中移出，只是将其相对于浏览器窗口/最接近的父级放置。这里想到两个解决方案：

1. 对侧边栏应用固定宽度，同时对内容应用相同大小的左边界。
2. 覆盖边栏的CSS并使用position: static。现在，侧边栏再次成为常规页面流的一部分，您可以将其显示在内容旁边（通过将其父级设置为弹性容器即可轻松实现-在display: flex上应用#app属性是一个不错的开始）。