Vuetify 网格系统 - 如何删除 v-col 边距?

时间:2021-04-08 19:11:05

标签: vuetify.js

我试图让三个 v-btn 在宽屏中水平显示,在移动设备中垂直显示。

以下代码可以完成这项工作,但是 v-col 的大小太宽了,所以按钮之间的距离太远了。

如何确保 v-col 只占用其中的内容空间?

    <v-container
      class="ma-0 pa-0"
      fluid
    >
      <v-card
        max-width="100%"
        tile
        flat
        max-height="500px"
      >
        <v-parallax
          :src="require('../photo.jpeg')"
          fluid
        >
          <v-row
            align="center"
            justify="center"
            align-content="center"
            class="no-gutters ma-2"
          >
            <v-col
              class="text-center no-gutters"
              cols="12"
              sm="4"
            >
              <v-btn>Hello</v-btn>
            </v-col>
            <v-col
              class="text-center no-gutters"
              cols="12"
              sm="4"
            >
              <v-btn>Hello</v-btn>
            </v-col>
            <v-col
              class="text-center no-gutters"
              cols="12"
              sm="4"
            >
              <v-btn>Hello</v-btn>
            </v-col>
          </v-row>
        </v-parallax>
      </v-card>
    </v-container>

0 个答案:

没有答案