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

Question

我在左上角有以下社交媒体按钮：

这是代码：

<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>

如您所见，按钮彼此重叠。如何获得它们之间垂直的空间？

Answer 1

这是因为您有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>