Vuetify：如何在大屏幕尺寸上正确限制容器的最大宽度？

Question

我的 vuetify 布局基于 flex：

<v-app>
  <v-navigation-drawer app clipped right permanent>...</v-navigation-drawer>
  <v-app-bar app clipped-right>...</v-app-bar>
  <v-main>
    <v-flex class="flex-column fill-height pa-4">
      ...
    </v-flex>
  </v-main>
</v-app>

这种布局很好，但在大屏幕上它适合整个宽度。 我想将宽度限制在 1200 像素。 但是，如果我在v-flex 、 v-main甚至v-app任何一个上设置“max-width: 1200px”，我会在屏幕左侧获得容器，在屏幕右侧获得导航抽屉。 其余的空白位于它们之间。

我想得到的是：容器和导航抽屉的摘要宽度必须= 1200px，它们必须以屏幕为中心，并且抽屉应该固定在容器的右侧。 在大屏幕尺寸上，应该从左侧和右侧出现间隔。 像这样的东西：

[ . . . . . . . top bar . . . . . . . . ]
[space][....container....][drawer][space]

在较小尺寸的容器和抽屉上应适合整个屏幕宽度。 是否可以？

UPD：要清楚。 以上是我想在宽屏上看到的内容。 在窄屏上我想得到：

[ . . . . top bar . . . . ]
[....container....][drawer]

我现在在宽屏上得到的：

[ . . . . . . . top bar . . . . . . . . ]
[....container....][...space....][drawer]

Answer 1

您可以将导航抽屉放在容器内，而不是针对 vuetify 生成的类，然后向容器添加position: relative样式。 删除抽屉的app属性，并用absolute替换它。

<v-app>
  <v-main>
    <v-app-bar app clipped-right>Toolbar</v-app-bar>
    <v-container style="max-width: 1200px; position: relative;" class="d-flex pa-0">
      <div class="flex-column fill-height pa-4 flex-grow-1">Content</div>
      <v-navigation-drawer absolute clipped right permanent>Drawer</v-navigation-drawer>
    </v-container>
  </v-main>
</v-app>

.main-container {
  position: relative !important;
  max-width: 1200px !important;
}

这是一个演示：

Answer 2

我用以下css解决了它。 这个解决方案不是最优雅的，但会使用它，因为我没有其他解决方案。 您应该将“1000px”替换为容器所需的最大宽度，将“30px”替换为填充的总和（或尝试实验）。

@media (min-width: 1000px) {
    .v-application {
        max-width: calc(1000px - 30px);
        margin-left: calc((100vw - 1000px) / 2);
    }

    .v-navigation-drawer--right {
        right: calc((100vw - 1000px) / 2);
    }
}