我正在使用 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)使高度与登录卡相同,以便它们看起来更好?
谢谢!祝你有美好的一天!
检查我制作的这个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 的地方一起使用。