亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Vuetify v-card 適合 v-col 中可能的所有高度
P粉692052513
P粉692052513 2024-04-06 10:29:26
0
1
1000

我正在使用 vue 和 vuetify 建立一個(gè)登入/註冊(cè)頁(yè)面。 我將程式碼放在下面(文字是義大利語(yǔ),因?yàn)槲沂橇x大利語(yǔ),但你可以明白這一點(diǎn)):

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

如果您嘗試此操作,您將看到「註冊(cè)」(註冊(cè))卡的高度比登入卡低。有沒有辦法(最好使用CSS,但如果沒有JS)使高度與登入卡相同,以便它們看起來(lái)更好?

謝謝!祝你有美好的一天!

P粉692052513
P粉692052513

全部回覆(1)
P粉908138620

檢查我製作的這個(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),在本例中,我將它們套用到style 屬性,但您可以將其與任何html 屬性和任何帶有js 的地方一起使用。



...




...

最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板