Javascript 如何在vue中将表格放置在侧边栏旁边

我有一个vue项目，其中我使用vuetify的边栏和工具栏，以及vuebootstrap的数据表。我试着把表格放在工具栏下和侧边栏旁边，就像在管理仪表板中一样，但是表格在侧边栏的底部，我试着用控制台调试我的错误，我猜我正在使用的v-app在我的组件中导致了这个错误，我调用了两者，但我不知道如何修复它，也许我忽略了一些东西，我刚开始使用vue，正在尝试开发responsiv设计。这是我的密码：

表组件：

<template>
  <div class="col-auto mx-auto my-auto" >
    <b-button @click="toggleBusy">Toggle Busy State</b-button>

    <b-table :items="items" :busy="isBusy" class="mt-3" outlined align="center" justify="center">
      <template #table-busy>
        <div class="text-center text-danger my-2">
          <b-spinner class="align-middle"></b-spinner>
          <strong>Loading...</strong>
        </div>
      </template>
    </b-table>
  </div>
</template>

<template>
      <div>
        <v-app-bar
          color="deep-purple accent-4"
          dense
          dark
        >
          <v-app-bar-nav-icon></v-app-bar-nav-icon>

          <v-toolbar-title>Wlcome</v-toolbar-title>

          <v-spacer></v-spacer>

          <v-btn class="mx-2"  color="primary">
          Contact
          </v-btn>

          <v-btn >
          Logout
          </v-btn>


        </v-app-bar>
      <v-navigation-drawer permanent expand-on-hover>
        <v-list>
          <v-list-item class="px-2">
            <v-list-item-avatar>
              <v-img
                src="https://randomuser.me/api/portraits/women/85.jpg"
              ></v-img>
            </v-list-item-avatar>
          </v-list-item>

          <v-list-item link>
            <v-list-item-content>
              <v-list-item-title class="title">
                Sandra Adams
              </v-list-item-title>
              <v-list-item-subtitle>sandra_a88@gmail.com</v-list-item-subtitle>
            </v-list-item-content>
          </v-list-item>
        </v-list>

        <v-divider></v-divider>

        <v-list nav dense>
          <v-list-item link>
            <v-list-item-icon>
              <v-icon>home</v-icon>
            </v-list-item-icon>
            <v-list-item-title>Home</v-list-item-title>
          </v-list-item>
          <v-list-item link>
            <v-list-item-icon>
              <v-icon>mdi-account-multiple</v-icon>
            </v-list-item-icon>
            <v-list-item-title>Profile</v-list-item-title>
          </v-list-item>
          <v-list-item link>
            <v-list-item-icon>
              <v-icon>mdi-star</v-icon>
            </v-list-item-icon>
            <v-list-item-title>Starred</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-navigation-drawer>
      </div>
</template>

切换忙状态
加载…

我的边栏组件：

<template>
  <div class="col-auto mx-auto my-auto" >
    <b-button @click="toggleBusy">Toggle Busy State</b-button>

    <b-table :items="items" :busy="isBusy" class="mt-3" outlined align="center" justify="center">
      <template #table-busy>
        <div class="text-center text-danger my-2">
          <b-spinner class="align-middle"></b-spinner>
          <strong>Loading...</strong>
        </div>
      </template>
    </b-table>
  </div>
</template>

<template>
      <div>
        <v-app-bar
          color="deep-purple accent-4"
          dense
          dark
        >
          <v-app-bar-nav-icon></v-app-bar-nav-icon>

          <v-toolbar-title>Wlcome</v-toolbar-title>

          <v-spacer></v-spacer>

          <v-btn class="mx-2"  color="primary">
          Contact
          </v-btn>

          <v-btn >
          Logout
          </v-btn>


        </v-app-bar>
      <v-navigation-drawer permanent expand-on-hover>
        <v-list>
          <v-list-item class="px-2">
            <v-list-item-avatar>
              <v-img
                src="https://randomuser.me/api/portraits/women/85.jpg"
              ></v-img>
            </v-list-item-avatar>
          </v-list-item>

          <v-list-item link>
            <v-list-item-content>
              <v-list-item-title class="title">
                Sandra Adams
              </v-list-item-title>
              <v-list-item-subtitle>sandra_a88@gmail.com</v-list-item-subtitle>
            </v-list-item-content>
          </v-list-item>
        </v-list>

        <v-divider></v-divider>

        <v-list nav dense>
          <v-list-item link>
            <v-list-item-icon>
              <v-icon>home</v-icon>
            </v-list-item-icon>
            <v-list-item-title>Home</v-list-item-title>
          </v-list-item>
          <v-list-item link>
            <v-list-item-icon>
              <v-icon>mdi-account-multiple</v-icon>
            </v-list-item-icon>
            <v-list-item-title>Profile</v-list-item-title>
          </v-list-item>
          <v-list-item link>
            <v-list-item-icon>
              <v-icon>mdi-star</v-icon>
            </v-list-item-icon>
            <v-list-item-title>Starred</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-navigation-drawer>
      </div>
</template>

威康
接触
注销
桑德拉·亚当斯
桑德拉_a88@gmail.com
家
家
mdi帐户多个
轮廓
mdi星
主演

以及我同时调用的组件：

<template>
<v-container>
  <v-app>
  <MenuComponent/>

  </v-app>
  <router-view/>
</v-container>
</template>

---

Routerview是这里的表组件

我不知道为什么要同时使用

bootstrap vue

和

vuetify

。这不是一个好的实践，因为它们提供了不同的方法，并且每个方法都有不同的指导方针。此外，它们可能在

CSS

代码中相互冲突。当我在这里查看您的代码片段时，我没有看到一个单

grid

系统。我建议将网格系统带到主组件，当然，还建议使用

bootstrap vue

中的

Sidebar

组件。