Vuetify容器最大宽度固定

Question

我正在使用Vue.js和Vuetify(https://vuetifyjs.com/en/)构建一个Web应用程序.我有一个简单的布局,有3列.但是,我希望3列填充页面的整个宽度,但是有一个自动的CSS片段强制最大宽度为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;
}

Answer 1

容器的概念在网站布局中非常常见.默认情况下,Vuetify使用"固定"容器."流体"容器将填充视口.

您可以在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

Answer 2

超级简单的答案：与上面的答案类似，但在样式中包含了宽度：100%；因为没有它我的就无法工作。

<template>
     <v-container fluid style="margin: 0px; padding: 0px; width: 100%">
          <v-layout wrap>
               <div class="container">
                    Content you want in a container as this takes on the container class.
               </div>
               <div>
                    Content you don't want contained as it takes on the fluid 100% width. 
               </div>
          </v-layout>
     </v-container>
</template> 

基本上，您覆盖整个默认 v-container 的宽度为 100%。