如何使用Vuetify网格在不同的屏幕分辨率下固定列大小

Question

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

我已经尝试过将边栏的最大宽度手动设置为300px，但没有用。

<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

Answer 1

简短的答案是，对于这样的网格，三列区域的设计始终是容器宽度的25％。如果您希望边栏保持3列部分的大小，可以将其设置为max-width:100%;

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