我正在使用 vue 和 vuetify 构建一个登录/注册页面。 我将代码放在下面(文本是意大利语,因为我是意大利语,但你可以明白这一点):
<v-row
align="center"
justify="center"
class="prova"
>
<v-col
cols="10"
lg="3"
md="4"
sm="5"
>
<v-card
>
<v-card-title class="center">
Login
</v-card-title>
<v-card-text
class="center"
>
<v-container>
<v-form>
<v-text-field
label="Email"
required
></v-text-field>
<v-text-field
:append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
:type="showPassword ? 'text' : 'password'"
label="Password"
counter
@click:append="showPassword = !showPassword"
></v-text-field>
<v-btn
color="primary"
>
Accedi
</v-btn>
</v-form>
</v-container>
</v-card-text>
</v-card>
</v-col>
<v-col
cols="10"
lg="3"
md="4"
sm="5"
fill-height
>
<v-card
>
<v-card-title class="center">
Registrazione
</v-card-title>
<v-card-text class="center">
<v-container >
<div
>Vuoi accedere al sito
ma non sei registrato?
Clicca qui sotto
per farlo subito!</div>
<br>
<v-btn
color="primary"
>
Registrati
</v-btn>
</v-container>
</v-card-text>
</v-card>
</v-col>
</v-row>
如果您尝试此操作,您将看到“注册”(注册)卡的高度比登录卡低。有没有办法(最好使用CSS,但如果没有JS)使高度与登录卡相同,以便它们看起来更好?
谢谢!祝你有美好的一天!
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
检查我制作的这个codesandbox:https: //codesandbox.io/s/stack-70836234-11sck?file=/src/components/CardHeight.vue
从
v-row中删除align="center"。然后只需将 cssheight:100%添加到您的v-card更新: 要仅在移动视图上为
v-card设置固定高度,可以使用 vuetify 的显示断点,在本例中,我将它们应用于style属性,但您可以将其与任何 html 属性和任何带有 js 的地方一起使用。