gpt4 book ai didi

css - Vuetify 容器最大宽度固定

转载 作者:技术小花猫 更新时间:2023-10-29 10:55:18 27 4
gpt4 key购买 nike

我正在使用 Vue.js 和 Vuetify ( https://vuetifyjs.com/en/) 构建一个网络应用程序。我有一个简单的布局,有 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)。

您可以设置 fluid支持 true在你的 Vuetify 容器上 <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

关于css - Vuetify 容器最大宽度固定,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51181726/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com