मैं कॉल्स के बाएँ और दाएँ रिक्ति के साथ n v-cols की मात्रा को केन्द्रित करने का प्रयास कर रहा हूँ, लेकिन v-cols को उपरोक्त v-cols के साथ संरेखित करने में असमर्थ हूं। ध्यान दें कि प्रतिक्रियात्मकता इरादे के अनुसार काम कर रही है, लेकिन अधिकतम स्क्रीन आकार पर मैं इसे दो v-cols तक सीमित करना चाहता हूं और इसे अन्य v-row क्षैतिज लंबाई में संरेखित करना चाहता हूं, जबकि सभी समान लंबाई v- कोल्स

वर्तमान में मुझे यह मिलता है: यहां छवि विवरण दर्ज करें

से

<v-container>
  <v-row dense justify="center">
    <v-col cols="12" md="6" lg="4" xl="3">
      // ...
    </v-col>
  </v-row>

  <v-row dense justify="center">
    <v-col cols="12" sm="6" xs="6" md="6" lg="4" xl="3">
      // ...
    </v-col>
    <v-col cols="12" sm="6" xs="6" md="6" lg="4" xl="3">
      // ...
    </v-col>
  </v-row>

  <v-row dense justify="center">
    <v-col v-for="(item, n) in list" :key="n" cols="12" sm="6" md="6" lg="4" xl="4">
      // ...
    </v-col>
  </v-row>

मैं जो हासिल करने की कोशिश कर रहा हूं उसे नीचे देखा जा सकता है; यहां छवि विवरण दर्ज करें

लाल v-cols के किनारों में रिक्ति जोड़ने के लिए क्या किया जा सकता है ताकि उन्हें अन्य उपरोक्त v-cols (उपरोक्त v-पंक्तियों में) के साथ संरेखित किया जा सके?

संपादित करें: इस कोड के साथ अब काम करता है:

<v-container>
<!-- .. other rows -->

<v-row justify="center">
  <v-col cols="24" sm="12" xs="12" md="12" lg="8" xl="6">
    <v-row dense justify="center" class="green">
      <v-col v-for="(item, n) in list" :key="n" sm="12" xs="12" md="12" lg="8" xl="6" class="br text-center red">
        // content
      </v-col>
    </v-row>
  </v-col>
</v-row>
</v-container>
1
asisleep 28 नवम्बर 2020, 00:23

1 उत्तर

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

आप अपना लेआउट कुछ इस तरह लपेट सकते हैं:

<v-row justify="center" align="center">
    <v-col cols="10">
      // Your layout goes here
    </v-col>
</v-row>

पहली पंक्ति का तत्व इसके अंदर के कॉल को केंद्रित बनाता है और चूंकि कॉल तत्व का कोल्स प्रोप 10 (या 12 के अलावा अन्य संख्या जो आपकी आवश्यकताओं के अनुरूप है) पर सेट है, इसमें पक्षों से एक समान स्थान है।

तो इस तरह आप इस रैपर के अंदर जो भी लेआउट डालते हैं वह संरेखित हो जाएगा।

संपादित करें: मैंने इस विचार के साथ काम किया और आपके देखने के लिए एक पेन तैयार किया। यहाँ कलम है:

vuetify लेआउट कोड पेन

1
hamid niakan 28 नवम्बर 2020, 08:42