Bootstrap Vue中的订单网格
Bootstrap Vue中的订单网格
提问于 2021-06-29 03:48:44
从API中获取数据，并通过v-for循环在div中呈现每个数据。我希望div的网格是这样的：
[-- item 1 --][-- item-2 --]
[-- item 3 --][-- item-4 --]
[-- item 5 --][-- item-6 --]
[-- item 7 --][-- item-8 --]但我还不知道如何在Bootstrap、Vue或CSS中实现它。
回答 1
Stack Overflow用户
发布于 2021-06-29 05:00:00
最好是使用Layout and Grid System of Bootstrap来实现这些事情。
注意<b-col> (doc)的属性cols=""
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68169259
复制相关文章
相似问题
腾讯云开发者
