Question

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

代码如下：

<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 中手动执行？

Answer 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>

如何在 Vuetify 中修复 v-col？

1 个答案: