我希望将这七个按钮居中对齐。如您所见,最后一个按钮与第一个按钮相比有点偏移。
我该如何实现这个?我已经尝试了
这是
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>