CSS Vuetify 容器最大宽度固定
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51181726/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vuetify Container max-width fixed
提问by Marcelo Li Koga
I am building a web application with Vue.js and Vuetify (https://vuetifyjs.com/en/). I have a simple layout, with 3 columns. However, I would like the 3 columns to fill the whole width of the page, but there is an automatic piece of CSS that enforces max-width to 960px. Why is that? How can I use the whole screen? You can also check it here: https://codepen.io/mlikoga/pen/KeLNvy
我正在使用 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>
The automatic CSS:
自动 CSS：
@media only screen and (min-width: 960px)
.container {
max-width: 960px;
}
回答by joknawe
The concept of containers is very common among website layouts. By default, Vuetify uses a 'fixed' container. A 'fluid' container will fill the viewport.
容器的概念在网站布局中非常普遍。默认情况下，Vuetify 使用“固定”容器。“流体”容器将填充视口。
You can set the fluidprop to trueon your Vuetify container <v-container>:
您可以在 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>
Here is some helpful information about fixed vs fluid containers: https://www.smashingmagazine.com/2009/06/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/
以下是有关固定容器与流体容器的一些有用信息：https: //www.smashingmagazine.com/2009/06/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/
Additional Vuetify grid information can be found here: https://vuetifyjs.com/en/layout/grid
可以在此处找到其他 Vuetify 网格信息：https://vuetifyjs.com/en/layout/grid
回答by Jason
Super Simple Answer:It's similar to the answer above but includes width:100%; as mine didn't work without it. You might have the same issue. It could be because I used the style tag instead of their class attributes. Something to be aware of.
超级简单的答案：与上面的答案类似，但包括宽度：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>
Basically, you give the entire v-container a width of 100% to allow any element to extend the entire width of the page.
基本上，你给整个 v-container 一个 100% 的宽度，以允许任何元素扩展页面的整个宽度。
And the elements you do want contained, you include in a div with container class.
而你想要包含的元素，你包含在一个带有容器类的 div 中。
