मैं vuejs के लिए नया हूँ और मैंने vuetifyjs के साथ शुरुआत की है। मुझे उनके लेआउट में समस्या हो रही है। मैं क्या करना चाहता हूं: मेरे पास चार कॉलम हैं उदाहरण के लिए उनके पास 12 लेआउट ग्रिड में 4 चौड़ाई है। एक ही विराम बिंदु पर वे एक ही पंक्ति में रहने के बजाय एक दूसरे के नीचे जाएंगे

<template>
<v-container class="grey lighten-5">
    <v-row class="mb-6" no-gutters>
        <v-col v-for="n in 4" :key="n" cols="md-3">
            <v-card class="pa-2" tile outlined>
                col
            </v-card>
        </v-col>
    </v-row>
<v-container>
</template>

लेकिन उनकी हमेशा एक ही चौड़ाई होती है:

मुझे बूटस्ट्रैप में कुछ चाहिए:

col-md-4

उनके पास 768px तक 4 चौड़ाई होगी, उसके नीचे कॉलम एक के नीचे एक होंगे।

क्या यह vuetifyjs के साथ संभव है?

0
user14657384 17 नवम्बर 2020, 22:49

1 उत्तर

सबसे बढ़िया उत्तर

cols प्रोप कॉलम की डिफ़ॉल्ट संख्या सेट करना है। फिर उस ब्रेकपॉइंट पर कॉलम की संख्या निर्धारित करने के लिए ब्रेकपॉइंट प्रॉप्स (sm, md, lg, ...) का उपयोग करें।

इसलिए, मोबाइल पर पूर्ण-चौड़ाई वाले कॉलम के लिए, और md और बड़े पर 4 कॉलम के लिए:

     <v-container class="grey lighten-5">
            <v-row class="mb-6" no-gutters>
                <v-col v-for="n in 4" :key="n" cols="12" md="3">
                    <v-card class="pa-2" tile outlined> col </v-card>
                </v-col>
            </v-row>
     <v-container>

https://codeply.com/p/jhYKePIxal

यह भी ध्यान दें कि Vuetify के ब्रेकप्वाइंट बूटस्ट्रैप के ब्रेकप्वाइंट से अलग हैं। "माध्यम" 960px > < 1264px* है, और कोई 768px ब्रेकप्वाइंट नहीं है।

0
Zim 17 नवम्बर 2020, 23:04