时间戳

首页 > 解决方案 > Vuetify v-footer 中的网格系统无法按预期工作

vue.js - Vuetify v-footer 中的网格系统无法按预期工作

问题描述

我正在尝试将我的所有链接放在页脚的三列中，版权行在其下方。但是，我的版权行显示在幻影第四列中，如果屏幕宽度太小，它会与第三列重叠。如果我在内容部分使用相同的布局，我会得到三列。

这是我的页脚组件：

<template>
  <div>
    <v-footer color="primary lighten-1" padless>
      <v-row justify="center">
        <v-col cols=4>
          <div class="my-1">
            <v-btn color="white" text rounded>
              Contact Us
            </v-btn>
          </div>
          <div class="my-1">
            <v-btn color="white" text rounded>
              Contact Us
            </v-btn>
          </div>
        </v-col>
        <v-col cols=4>
          <div class="my-1">
            <v-btn color="white" text rounded>
              Data Sources
            </v-btn>
          </div>
        </v-col>
        <v-col cols=4>
          <div class="my-1">
            <v-btn color="white" text rounded>
              Browse Maps
            </v-btn>
          </div>
        </v-col>
      </v-row>

      <v-row>
        <v-col cols="12">
          <p class="text-center grey--text text--lighten-2">Copyright 2020, </p>
        </v-col>
      </v-row>
    </v-footer>
  </div>
<template>

在一个可能相关的注释中，为什么我必须用 my- 将每个按钮包装在一个 div 中？类来让按钮垂直堆叠。

编辑：

我正在使用 Vuetify v2.2.11。

这是它正在做什么的屏幕截图：

在此处输入图像描述

这是我想要的：

在此处输入图像描述

除非我将它们包裹在 my-？分类的 div 或列中没有足够的空间来显示它们的侧面/侧面。我希望它们在每个屏幕尺寸中都堆叠在一起。当然，我只想要我的按钮的三列

标签： vue.jsvuetify.js

解决方案

Av-row仅在包裹在 a 中时才能按预期工作v-container。<v-container fluid>在你的 v-rows 周围添加一个，它应该可以正常工作。流体被描述为“删除视口最大宽度大小断点”，从而删除了水平填充。

整个事情最终看起来像这样：

<template>
  <div>
    <v-footer color="primary lighten-1" padless>
      <v-container fluid>
        <v-row class="text-center">
          <v-col cols="4">
            <div class="my-1">
              <v-btn color="white" text rounded>
                Contact Us
              </v-btn>
            </div>
            <div class="my-1">
              <v-btn color="white" text rounded>
                Contact Us
              </v-btn>
            </div>
          </v-col>
          <v-col cols="4">
            <div class="my-1">
              <v-btn color="white" text rounded>
                Data Sources
              </v-btn>
            </div>
          </v-col>
          <v-col cols="4">
            <div class="my-1">
              <v-btn color="white" text rounded>
                Browse Maps
              </v-btn>
            </div>
          </v-col>
        </v-row>

        <v-row>
          <v-col cols="12">
            <p class="text-center grey--text text--lighten-2">
              Copyright 2020,
            </p>
          </v-col>
        </v-row>
      </v-container>
    </v-footer>
  </div>
</template>

推荐阅读