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

Posted 2023-02-22

【中文标题】如何在 Vuetify 中对齐组件内的内容？

【英文标题】：How to align content inside of a component in Vuetify?

【发布时间】：2020-03-11 00:09:08

【问题描述】：

我有这张图片：

如你所见，里面有四个透明按钮，Home、Offers、About和Contact。

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

这是我的代码：

<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
        
        v-for="(button, index) in viewButtons"
        :key="index"
      >
         button.name 
      </v-btn>
    </v-row>
  </v-container>
</v-img>

【问题讨论】：

将此添加到您的组件样式中：.container position: absolute; bottom: 0px

谢谢！您可以将其发布为答案，我会勾选它，以便有相同问题的人更容易看到。

【参考方案1】：

您可以通过访问其staticClass: 'container' 来修改 v-container 样式

所以只需添加

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

【讨论】：

我不会使用这个建议。您最好使用框架，并远离硬编码的 0px，并且在这种情况下，绝对位置在调整大小和不同的显示器尺寸时也没有任何灵活性。覆盖默认容器也不是好的做法。

@SweetChillyPhilly 我同意覆盖默认容器类是不好的做法 - 但我不明白你的硬编码问题？这是在.v_responsive -> 相对的，因此被困在v-img 默认槽内。

您建议的编辑非常好。谢谢 :) 并同意。我本可以更好地使用该框架，但我想尽快帮助这个人。

在 vuetify 上覆盖样式不是一个好主意，请改用 helpers

@FernandoTorres 我最喜欢的是html overflow-y:hidden ;) 但是是的 - 同意是个坏主意

【参考方案2】：

我会将容器从 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
        
        v-for="(button, index) in viewButtons"
        :key="index"
      >
         button.name 
      </v-btn>
    </v-row>
  </v-container>
</div>

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

它应该让你开始并指出正确的方向。