Question

我有这张图片：

如您所见，其中有四个透明按钮，即“主页”，“优惠”，“关于”和“联系人”。

如何将它们对准图像的底部而不是顶部？

这是我的代码：

<v-img src="@/assets/banner/webbanner.png">
  <v-container>
    <v-row align="center" justify="center">
      <v-btn
        color="transparent"
        class="mx-2 white--text"
        depressed
        width="200"
        v-for="(button, index) in viewButtons"
        :key="index"
      >
        {{ button.name }}
      </v-btn>
    </v-row>
  </v-container>
</v-img>

Answer 1

我会从v-imge中拉出容器。然后给它一个flex类

<div class="container d-flex flex-column">
  <v-img src="@/assets/banner/webbanner.png" class="imageContent" />
  <v-container>
    <v-row" justify="space-between">
      <v-btn
        color="transparent"
        class="mx-2 white--text"
        depressed
        width="200"
        v-for="(button, index) in viewButtons"
        :key="index"
      >
        {{ button.name }}
      </v-btn>
    </v-row>
  </v-container>
</div>

我还没有测试过，但是flexbox可以帮助很多https://yoksel.github.io/flex-cheatsheet/

它应该帮助您入门并指向正确的方向。

Answer 2

您可以通过访问其staticClass: 'container'

来修改v容器样式。

所以只需添加

<v-container class="container-scoped">...</...>
.container-scoped{ position: absolute; bottom: 0px }

查看您的组件样式。

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vuetify@2.1.10/dist/vuetify.min.js"></script>

<div id="app">
  <v-app id="inspire">
    <v-row align="center" justify="center">
      <v-img
        src="https://picsum.photos/id/11/500/300"
        lazy-src="https://picsum.photos/id/11/10/6"
        aspect-ratio="1"
        class="grey lighten-2"
        max-width="250"
        max-height="150"
      >
        <v-container
          style="position:absolute;bottom:0px"
          
        >
          <v-row align="center" justify="space-around">
            <div class="white--text mx-2">btn</div>
            <div class="white--text mx-2">btn</div>
          </v-row>
        </v-container>
      </v-img>
    </v-row>
  </v-app>
</div>

如何在Vuetify中对齐组件内部的内容？

2 个答案: