如何使用 vuetify 网格修复不同屏幕分辨率下的列大小答案

【问题标题】：How to fix the columns size in different screen resolutions using vuetify grid如何使用 vuetify 网格修复不同屏幕分辨率下的列大小
【发布时间】：2019-09-05 05:34:42
【问题描述】：

我正在使用 Vue 和 Veutify 创建一个简单的仪表板。我选择使用 vuetify 库中可用的网格系统来构建布局。问题是我无法根据屏幕分辨率获得相同的外观。有没有办法让左侧容器始终与侧抽屉的宽度一致？

我已经尝试将侧边栏的最大宽度手动设置为 300 像素，但没有成功。

<v-container grid-list-md text-xs-center>
    <v-layout row wrap>
      <v-flex xs3 class="side">
        <SideBar/>
      </v-flex>
      <v-flex xs9 class="main" >
         <MainPage/>
      </v-flex>
    </v-layout>
  </v-container>

我期待

我明白了

编辑：生成的 HTML/CSS：https://pastebin.com/bLYgv5pz

【问题讨论】：

如果您可以发布呈现的 HTML 和 CSS，那将更容易回答您的问题。

标签： css vue.js vuetify.js

【解决方案1】：

简短的回答是，对于像这样的网格，3 列区域的设计始终是容器宽度的 25%。如果你想让侧边栏保持3列部分的大小，你可以给它max-width:100%;

我不熟悉 Vuetify 使用的确切样式，但如果您可以发布生成的 HTML 和 CSS，当然应该可以建议您如何限制该列的增长。

【讨论】：