Javascript 使用Vue创建静态左导航栏组件

我需要在我的应用程序布局的左边有一个垂直导航栏，内容都在右边

就目前而言，我不能那样做。我的导航栏将所有内容向下推。我怎样才能解决这个问题

这就是我的App.vue模板的外观：

<template>
    <div id="app">
        <v-app>
            <navbar/>
            <v-main>
                <v-container class="main-container">
                    <router-view/>
                </v-container>
            </v-main>
        </v-app>
    </div>
</template>

正如上面提到的，这仍然只是将应用程序的所有内容向下推。这就是它目前的样子：

<template>
    <div id="app">
        <v-app>
            <navbar/>
            <v-main>
                <v-container class="main-container">
                    <router-view/>
                </v-container>
            </v-main>
        </v-app>
    </div>
</template>

我该怎么做才能使导航栏在左边，但在右边

---

编辑：为了澄清，我确实希望导航栏是垂直的，但我只是不希望它向下推所有内容。基本上，我希望我的应用程序有一个

将导航栏和main包装成：

---

默认情况下，v-app有一个带有flex-direction的内部包装器：columnCSS，这意味着它的子元素是垂直放置的。通过将这两个子元素包装在v行中，可以将它们放置在具有“flex direction:row”的包装元素中。

将导航栏和main包装在：

---

默认情况下，v-app有一个带有flex-direction的内部包装器：columnCSS，这意味着它的子元素是垂直放置的。通过将这两个子元素包装在一个v行中，您可以将它们放置在一个具有flex direction:row的包装元素中。

我猜您误解了这些概念。您正在将v-navigation-drawer包装到navbar组件中

在Vuetify中，v-navigation-drawer是一个用于构建侧栏的组件，这就是为什么您的组件是垂直的

你应该尝试使用v-app-bar。以下是文档：

编辑1 您可以使用组件中的app选项配置app边栏或app导航栏，如下所示：

  <v-navigation-drawer
    app
  >
  ...
  </v-navigation-drawer>

---

就像官方文件一样。如果您这样做，组件将正常工作，并且您的内容不会被向下推。

我猜您误解了这些概念。您正在将v-navigation-drawer包装到navbar组件中

在Vuetify中，v-navigation-drawer是一个用于构建侧栏的组件，这就是为什么您的组件是垂直的

你应该尝试使用v-app-bar。以下是文档：

编辑1 您可以使用组件中的app选项配置app边栏或app导航栏，如下所示：

  <v-navigation-drawer
    app
  >
  ...
  </v-navigation-drawer>

---

就像官方文件一样。如果您这样做，组件将正常工作，您的内容不会被向下推。

问题是，我确实希望它是垂直的，基本上这就是我页面的布局风格：从我在文档中可以看出，v-app-bars似乎没有垂直选项。@Felipendlich-什么？他说的第一件事是我需要一个垂直导航栏，所以你否决了我对你的误解的答案…在vuetify垂直导航菜单中是v-navigation-drawer。我投了反对票，因为正确的方法是在文档中。@Felipendlich-在编码中，尤其是在CSS中，解决问题的方法往往不止一种。我鼓励您浏览SO，并查看数千个CSS问题和多种解决方案。我们不会因为有人使用了与我们想象的不同的解决方案而否决投票。与其劝阻其他正确答案，不如将反对票保留在错误答案上。问题是，我确实希望它是垂直的，基本上这就是我页面的布局风格：从我在文档中可以看出，v-app-bars似乎没有垂直选项。@Felipendlich-什么？他说的第一件事是我需要一个垂直导航栏，所以你否决了我对你的误解的答案…在vuetify垂直导航菜单中是v-navigation-drawer。我投了反对票，因为正确的方法是在文档中。@Felipendlich-在编码中，尤其是在CSS中，解决问题的方法往往不止一种。我鼓励您浏览SO，并查看数千个CSS问题和多种解决方案。我们不会因为有人使用了与我们想象的不同的解决方案而否决投票。为了不正确的答案保留你的反对票比试图阻止其他正确答案要好得多。检查我的答案，不要担心反对票。这是那个不理解你的问题的人发来的。对不起，我还没有时间尝试你的解决方案，这就是为什么我没有解决这个问题。不会因为否决票而驳回：这里我们有一个完美的例子，说明为什么答案不应该因为否决票而驳回。检查我的答案，不要担心否决票。这是那个不理解你的问题的人发来的。对不起，我还没有时间尝试你的解决方案，这就是为什么我没有解决这个问题。不会因为否决票而否决它：这里我们有一个完美的例子，说明为什么不应该因为否决票而否决一个答案。事实上，这就是解决方案，一旦我同意，一切都会顺利进行

---

把它放在v排。谢谢你对v-app的解释，它给了我更多的关于它发生了什么的背景。事实上，这就是解决方案，当我把它包装在v-row中时，一切都很顺利。谢谢你在v-app上的解释，它给了我更多关于它发生了什么的上下文。