बूटस्ट्रैप-व्यू के साथ, मैं वस्तुओं की सूची बनाता हूं और मुझे बड़े उपकरणों में 2 कॉलम में आइटम बनाने की आवश्यकता होती है। जैसा दिखता है

<b-container  fluid="sm" v-for="nextAd in ads" :key="nextAd.id">
        <div style="border: 2px dotted green">
        {{ nextAd.id }}=>{{ nextAd.title }}
            </div>
    </b-container>

लेकिन मैं असफल रहा, क्योंकि मेरे पास हमेशा 1 कॉलम में आइटम होते हैं। कौन सा तरीका सही है?

"bootstrap-vue": "^2.1.0"
"vue": "^2.6.10"

धन्यवाद!

0
mstdmstd 23 जिंदा 2020, 10:03

1 उत्तर

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

आपको बूटस्ट्रैप grid सिस्टम का उपयोग करना होगा यदि आप वस्तुओं की एक उत्तरदायी सूची चाहते हैं।

new Vue({
 el: "#app"
});
<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue@2.2.2/dist/bootstrap-vue.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.2.2/dist/bootstrap-vue.min.js"></script>

<div id='app'>
  <b-container>
    <b-row>
      <b-col cols="12" sm="6" v-for="i in 10">
        <!-- Only adding this div with a background to highlight the columns -->
        <div class="bg-dark text-white">
          Item {{ i }}
        </div>
      </b-col>
    </b-row>
  </b-container>
</div>
1
Hiws 23 जिंदा 2020, 10:37