css - Vuetify容器最大宽度已固定

我正在使用Vue.js和Vuetify(https://vuetifyjs.com/en/)构建Web应用程序。
我有一个简单的布局，有3列。但是，我希望3列填充页面的整个宽度，但是有一块CSS自动将max-width强制为960px。这是为什么？如何使用整个屏幕？您也可以在这里检查它:https://codepen.io/mlikoga/pen/KeLNvy

<div id="app">
  <v-app>
    <v-content>
      <v-container ma-0 pa-0 fill-height>
        <v-layout row>
          <v-flex xs4> Chat List </v-flex>
          <v-flex xs4> Main Chat</v-flex>
          <v-flex xs4> User Profile</v-flex>
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</div>

自动CSS:

@media only screen and (min-width: 960px)
.container {
  max-width: 960px;
}

最佳答案

容器的概念在网站布局中非常普遍。默认情况下，Vuetify使用“固定”容器。 “流体”容器将填充视口(viewport)。

您可以在Vuetify容器fluid上将true属性设置为<v-container>:

<div id="app">
  <v-app>
    <v-content>
      <v-container fluid ma-0 pa-0 fill-height>
        <v-layout row>
          <v-flex xs4> Chat List </v-flex>
          <v-flex xs4> Main Chat</v-flex>
          <v-flex xs4> User Profile</v-flex>
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</div>

以下是有关固定容器与流体容器的一些有用信息:https://www.smashingmagazine.com/2009/06/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

其他Vuetify网格信息可以在这里找到:
https://vuetifyjs.com/en/layout/grid