css - 如何在 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>