<分区>
我正在研究 VueJs 和 bootstrap4 中的两个基本组件，问题是我的 div 我分配了类 .col-md-4 以便为每一行添加 3 个元素，但这并没有发生，实际上只是每行添加 1 个元素
Main.vue
<template>
<div class="col-md-12">
<categoriacard v-for="cate in categorias"
:categoria=cate :key="cate.id">
</categoriacard>
</div>
</template>
<script>
import categoriacard from './categoria-card';
export default {
name : 'MainBarber',
data(){
return {
categorias : []
}
},
components :{
categoriacard
},
mounted(){
this.getCategorias();
},
methods : {
getCategorias(){
axios.get('/api/categorias')
.then((res)=>{
this.categorias = res.data;
})
}
}
}
</script>
categoria-card.vue
<template>
<div class="col-md-4 mb-md-0 mb-4 mt-4 ">
<div class="card card-image" >
<div class="text-white text-center justify-content-center rgba-black-strong py-5 px-4 rounded">
<div>
<h6 class="purple-text">
<i class="fa fa-pie-chart"></i>
<strong>Categoria</strong>
</h6>
<h3 class="py-3 font-weight-bold">
<strong>{{ categoria.nombre }}</strong>
</h3>
<p class="pb-3 text-center">{{ categoria.descripcion }} </p>
<a class="btn btn-success btn-rounded btn-md waves-effect waves-light"><i class="fa fa-clone left"></i>Ver Servicios</a>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name : 'categoria-card',
props : ['categoria']
}
</script>
我目前有这个结果
我想要的是
这可能会发生吗？
完整的 HTML 是
<div class="container">
<div class="row">
<MainBarber></MainBarber>
</div>
</div>