时间戳

首页 > 解决方案 > 如何在 Vuetify 中垂直对齐元素？

css - 如何在 Vuetify 中垂直对齐元素？

问题描述

我在左上角有这些社交媒体按钮：

在此处输入图像描述

这是代码：

<v-row v-for="(button, index) in socialMediaButtons" :key="index">
  <v-col>
    <v-btn fixed fab class="mt-5 ml-1"><v-icon>{{ button.logo }}</v-icon></v-btn>
  </v-col>
</v-row>

如您所见，按钮相互重叠。我怎样才能实现它们之间有垂直空间？

标签： cssvuetify.js

解决方案

这是因为你有fixed道具，这使得v-col认为列内没有任何东西。所以没有计算按钮的高度，这使得按钮重叠。

尝试这样的事情（示例）

<v-row>
  <v-col sm="12">
    <v-btn fab dark small color="primary">
      <v-icon dark>mdi-minus</v-icon>
    </v-btn>
  </v-col>
  <v-col sm="12">
    <v-btn fab dark small color="pink">
      <v-icon dark>mdi-heart</v-icon>
    </v-btn>
  </v-col>
</v-row>;

你的代码

<v-row v-for="(button, index) in socialMediaButtons" :key="index">
  <v-col sm="12>
    <v-btn fab class="mt-5 ml-1"><v-icon>{{ button.logo }}</v-icon></v-btn>
  </v-col>
</v-row>

推荐阅读