如何在 vuetify 中水平对齐 v-cols？答案

【问题标题】：How to align v-cols horizontally in vuetify?如何在 vuetify 中水平对齐 v-cols？
【发布时间】：2019-10-21 14:38:53
【问题描述】：

我想将所有七个按钮居中对齐。如您所见，与第一个相比，最后一个有点偏离。

我如何实现这一目标？我已经尝试过justify="center" 和justify="space-around"

这是我的代码：

  <v-row no-gutters justify="space-around">
    <v-col v-for="(item, index) in buttons" :key="index">
      <toggle-button
        :weekday="item.weekday"
        :button="item.state"
      ></toggle-button>
    </v-col>
  </v-row>

这是toggle-button 组件：

<template>
  <v-btn
    outlined
    depressed
    :class="button ? 'primary white--text' : 'outlined'"
    @click="button ? (button = false) : (button = true)"
    v-model="button"
    icon
  >
    {{ $t("roomservice.weekdays." + weekday) }}
  </v-btn>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: ["button", "weekday"]
};
</script>

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

v-col 不是 flex 并且里面的内容（切换按钮）可以从左边开始。

您可以通过在v-col 上添加class="d-flex justify-center" 来解决此问题

<v-row no-gutters justify="space-around">
    <v-col 
        class="d-flex justify-center"
        v-for="(item, index) in buttons" 
        :key="index">
        <toggle-button
            :weekday="item.weekday"
            :button="item.state"
        ></toggle-button>
    </v-col>
</v-row>

【讨论】：