Question

我是Vuetify的新手，现在我很难理解其网格系统的原理。

我尝试创建两列填充页面高度的页面。第一个应具有两个容器：工具栏（不是应用程序工具栏）和内容容器（应利用列的整个可用高度）。第二列（没有导航）填充页面的整个高度。

基本版式如下：

<v-content>
  <v-container>
    <v-row>
      <v-col :cols="9">
        <v-toolbar></v-toolbar>
        <v-row></v-row>
      </v-col>

      <v-col :col="3"></v-col>
    </v-row>
  </v-container>
</v-content>

调整后的版本：

<v-content>
  <v-container class="fill-height pa-0" fluid>
    <v-row class="fill-height" no-gutters>
      <v-col class="d-flex flex-column" :cols="9">
        <v-toolbar class="flex-grow-0" dense flat>
          <v-app-bar-nav-icon />

          <v-toolbar-title>Toolbar</v-toolbar-title>
        </v-toolbar>

        <v-row class="flex-grow-1 blue"></v-row>
      </v-col>

      <v-col class="pa-3 red" :col="3">
        <v-card>
          <v-card-text>Component</v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</v-content>

Codepen：https://codepen.io/become-iron/pen/dyYzdbZ?editors=1000

看起来就像我想要的。但是我不认为它是用Vuetify方式制作的（无论它是什么）。有人可以帮我更好地实现布局吗？

v容器还应该用作每个页面的根元素吗？或如何？

坚持使用Vuetify构建简单的布局

0 个答案: