如何在 Vuetify 中修复 v-col？答案

【问题标题】：How to make v-col fixed in Vuetify?如何在 Vuetify 中修复 v-col？
【发布时间】：2021-08-17 10:32:24
【问题描述】：

我正在尝试制作一个 3 列的页面，其中一个中心是流体，另外两个是固定的。就像 facebook 的布局一样。

代码如下：

<template>
  <v-app>
    <v-app-bar app color="white" flat>
      <v-container class="py-0 fill-height">
        <v-responsive max-width="260">
          <v-text-field
            dense
            flat
            hide-details
            rounded
            solo-inverted
          ></v-text-field>
        </v-responsive>
        <v-spacer></v-spacer>
      </v-container>
    </v-app-bar>
    <v-main class="grey lighten-3">
      <v-container>
        <v-row>
          <v-col cols="12" sm="2">
            <v-sheet rounded="lg" min-height="268">
              <!-- should be fixed -->
            </v-sheet>
          </v-col>

          <v-col cols="12" sm="8">
            <!-- Scrollable  -->
            <v-sheet rounded="lg" min-height="268"></v-sheet>
            <v-sheet rounded="lg" min-height="268"></v-sheet>
            <v-sheet rounded="lg" min-height="268"></v-sheet>
          </v-col>

          <v-col cols="12" sm="2">
            <v-sheet rounded="lg" min-height="268">
              <!-- should be fixed  -->
            </v-sheet>
          </v-col>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
</template>

使用 Vuetify 的网格系统是否可行，还是我必须在 CSS 中手动完成？

【问题讨论】：

标签： css vue.js vuetify.js

【解决方案1】：

通过包装v-col 的内容并将位置设置为粘性来修复。

Fixed by wrapping contents of `v-col` and setting position to sticky. ```html
<template>
  <v-app>
    <v-app-bar app color="white" flat>
      <v-container class="py-0 fill-height">
        <v-responsive max-width="260">
          <v-text-field
            dense
            flat
            hide-details
            rounded
            solo-inverted
          ></v-text-field>
        </v-responsive>
        <v-spacer></v-spacer>
      </v-container>
    </v-app-bar>
    <v-main class="grey lighten-3">
      <v-container>
        <v-row>
          <v-col cols="12" sm="2">
            <div style="position: sticky; top: 76px">
              <v-sheet rounded="lg" min-height="268">
                <!-- should be fixed -->
              </v-sheet>
            </div>
          </v-col>

          <v-col cols="12" sm="8">
            <!-- Scrollable  -->
            <v-sheet rounded="lg" min-height="268"></v-sheet>
            <v-sheet rounded="lg" min-height="268"></v-sheet>
            <v-sheet rounded="lg" min-height="268"></v-sheet>
          </v-col>

          <v-col cols="12" sm="2">
            <v-sheet rounded="lg" min-height="268">
              <!-- should be fixed  -->
            </v-sheet>
          </v-col>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
</template>

【讨论】：