Ich erstelle eine Anmelde-/Registrierungsseite mit vue und vuetify. Ich habe den Code unten eingefügt (der Text ist auf Italienisch, weil ich Italiener bin, aber Sie verstehen, was ich meine):
<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>
Wenn Sie dies versuchen, werden Sie feststellen, dass die Karte ?Registrierung“ (Registrierung) niedriger ist als die Anmeldekarte. Gibt es eine M?glichkeit (vorzugsweise mit CSS, aber ohne JS), die H?he auf die gleiche H?he wie die Anmeldekarten zu bringen, damit sie besser aussehen?
Danke! Einen sch?nen Tag noch!
檢查我制作的這個(gè)codesandbox:https: //codesandbox.io/s/stack-70836234-11sck?file=/src/components/CardHeight.vue
從 v-row
中刪除 align="center"
。然后只需將 css height:100%
添加到您的 v-card
更新:
要僅在移動(dòng)視圖上為 v-card
設(shè)置固定高度,可以使用 vuetify 的顯示斷點(diǎn),在本例中,我將它們應(yīng)用于 style
屬性,但您可以將其與任何 html 屬性和任何帶有 js 的地方一起使用。
... ...