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

如果您使用帶有 Vuetify 的引導程序，那么您只需將 class .col-sm-2添加到您的代碼中。這是您可以獲得的最簡單的解決方案。

所以對此：

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

添加這個：

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

這應該有效。 如果您需要任何幫助，請告訴我。 希望這可以幫助。

Answer 2

這是因為你有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>