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

【问题标题】：Vuetify: How can I properly limit the max width of container on large screen sizes?Vuetify：如何在大屏幕尺寸上正确限制容器的最大宽度？
【发布时间】：2021-01-05 08:23:55
【问题描述】：

我的 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 中的任何一个上设置“最大宽度：1200px”，我会在屏幕左侧获得容器，而在屏幕右侧获得导航抽屉。其余的空白位于它们之间。

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

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

在较小尺寸的容器和抽屉应适合整个屏幕宽度。有可能吗？

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

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

我现在在宽屏上看到的内容：

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

【问题讨论】：

使用v-spacer?
在哪里使用？
你在哪里有[空间]？窄屏上的布局应该是什么？
我写道：在较小尺寸的容器和抽屉应适合整个屏幕宽度。如何将抽屉绑定到容器的右侧？
所以，在你有 [空格] 的地方使用 v-spacer - 你试过了吗？

标签： javascript css layout flexbox vuetify.js

【解决方案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;
}

这是demo：

【讨论】：

【解决方案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);
    }
}

【讨论】：