大佬教程收集整理的这篇文章主要介绍了Bootstrap Vue 中的订单网格，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
从 API 获取数据，并通过 v-for 循环在 div 中呈现每个数据。我希望 div 的网格是这样的：
[-- item 1 --][-- item-2 --]
[-- item 3 --][-- item-4 --]
[-- item 5 --][-- item-6 --]
[-- item 7 --][-- item-8 --]
但我还不知道如何在 bootstrap、Vue 或 CSS 中做到这一点。
最好使用 Layout and Grid System of Bootstrap 来实现这样的事情。
注意cols=""(doC)的属性<b-col>
new Vue({
el: '#app',data: {
items: [
{name: 1},{name: 2},{name: 3},{name: 4},{name: 5},{name: 6},{name: 7},{name: 8},]
}
})
Vue.config.productionTip = false
Vue.config.devtools = false<script src="https://cdnjs.cloudFlare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.js"></script>
<link href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div id="app">
<b-container>
<b-row>
<b-col
v-for="item in items"
:key="item.name"
cols="6"
>
Item {{ item.name }}
</b-col>
</b-row>
</b-container>
</div>以上是大佬教程为你收集整理的Bootstrap Vue 中的订单网格全部内容，希望文章能够帮你解决Bootstrap Vue 中的订单网格所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。