Vuetify의 중앙에 이미지가있는 두 개의 열이 같은 높이로 표시되지 않는 것 같습니다. 나는 모든 것을 시도했지만 내가 뭘 잘못하고 있는지 모르겠다. 이 이미지가 내가 달성하고 싶지 않은 것을 설명하기를 바랍니다.
아래는 스 니펫이지만 로컬에서 보는 것과 같지 않습니다. cols도 같은 높이가 아니기 때문에 정말 중요하다고 생각하지 않습니다.
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
showPassword:false,
valid: false,
wachtwoord:'',
wachtwoordRules: [
v => !!v || 'Wachtwoord is vereist',
],
email: '',
emailRules: [
v => !!v || 'E-mail is vereist',
v => /.+@.+\..+/.test(v) || 'Voer een geldig e-mailadres in',
]
}),
methods: {
validate () {
this.$refs.form.validate()
},
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.3.2/vuetify.min.js"></script>
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet"/>
<div id="app">
<v-app style="
background-color: #011c40;
background-image: linear-gradient(180deg, #011c40 50%, rgb(26, 65, 115) 100%);
background-size: cover;
">
<v-main>
<v-container fill-height>
<v-row justify="center"
align="center"
no-gutters
class="grey">
<v-col cols="4" class="grey lighten-5">
<v-img src="http://www.dpereira.nl/Er/img/banner.png"></v-img>
</v-col>
<v-col align="center" cols="4" class="grey lighten-5 pa-10">
<v-img class="mb-7" src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png" width="200px"></v-img>
<v-form ref="form"
v-model="valid"
>
<v-text-field
v-model="email"
:rules="emailRules"
label="E-mail"
required/>
<v-text-field
:type="showPassword ? 'text' : 'password'"
label="Wachtwoord"
:append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
@click:append="showPassword = !showPassword"
v-model="wachtwoord"
:rules="wachtwoordRules"
required
/>
<v-checkbox class="mt-0" dense label="Onthoud mij"></v-checkbox>
</v-form>
<v-btn height="50px" :disabled="!valid" tile ripple depressed block color="secondary" @click="validate">Inloggen</v-btn>
<div class="pt-3">
<v-divider></v-divider>
<div class="d-block caption text-center mt-3"><a href="">Wachtwoord vergeten?</a></div>
<div class="d-block caption text-center">Nog geen account? Meld u <a href="">hier</a> aan.</div>
</div>
</v-col>
</v-row>
</v-container>
</v-main>
</v-app>
</div>
처음 align="center"
에는 행에서 제거해야합니다 . 그런 다음 태그 에 contain
속성을 추가 v-img
하고 열을로 설정합니다 disply:flex
. 예:
<v-col cols="4" class="grey d-flex lighten-5">
<v-img contain src="http://www.dpereira.nl/Er/img/banner.png"></v-img>
</v-col>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다