V-kad Vuetify sesuai dengan semua ketinggian yang mungkin dalam v-col
P粉692052513
P粉692052513 2024-04-06 10:29:26
0
1
611

Saya sedang membina halaman log masuk/pendaftaran menggunakan vue dan vuetify. Saya meletakkan kod di bawah (teks dalam bahasa Itali kerana saya orang Itali, tetapi anda mendapat idea):

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

Jika anda mencuba ini, anda akan melihat bahawa ketinggian kad "pendaftaran" (pendaftaran) lebih rendah daripada kad log masuk. Adakah terdapat cara (sebaik-baiknya dengan CSS, tetapi tanpa JS) untuk menjadikan ketinggian sama dengan kad log masuk supaya ia kelihatan lebih baik?

Terima kasih! Semoga hari anda indah!

P粉692052513
P粉692052513

membalas semua(1)
P粉908138620

Lihat kotak kod ini yang saya buat: https://codesandbox.io/s/stack-70836234-11sck?file=/src/components/CardHeight.vue

Dari v-row 中删除 align="center"。然后只需将 css height:100% 添加到您的 v-card

Kemas kini: Untuk menggunakan atribut v-card 设置固定高度,可以使用 vuetify 的显示断点,在本例中,我将它们应用于 style hanya pada paparan mudah alih, tetapi anda boleh menggunakannya dengan mana-mana atribut html dan di mana-mana sahaja dengan js.



...




...

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan