Javascript 为什么使用div时不将div与bootstrap 4堆叠

我正在处理VueJs和bootstrap4中的两个基本组件，问题是我的div分配了class.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>

<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>

从“/categoria card”导入分类卡片；
导出默认值{
姓名：'MainBarber'，
数据（）{
返回{
类别：[]
}
},
组成部分：{
分类卡
},
安装的（）{
这个.getCategorias（）；
},
方法：{
getCategorias（）{
get（'/api/categorias'））
。然后（（res）=>{
this.categorias=res.data；
})
}
}
}

分类卡.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>

<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>

Categoria
{{categoria.nombre}}
{{categoria.descripion}

我想要的是


这可能会发生吗

所以完整的HTML是

<div class="container">
   <div class="row">
      <MainBarber></MainBarber>
   </div>
</div>

在以下情况下，它似乎可以正常工作：


将categoria-card.vue中的
col-md4
替换为
col-4
将Main.vue中的
col-md-12
替换为
row

请参见代码片段：



Vue.组件（'main2'{
姓名：'MainBarber'，
数据（）{
返回{
类别：[]
}
},
安装的（）{
这个.getCategorias（）；
},
方法：{
getCategorias（）{
控制台日志（“分类”）；
此.categorias=[
{id:1，名称：'Esportivo'，描述：'desc1'}，
{id:2，名称：'Infos'，描述：'desc2'}，
{id:3，名称：'Politica'，描述：'desc3'}，
{id:4，名称：'Moda'，描述：'desc4'}，
{id:5，名称：'Cocina'，描述：'desc5'}，
{id:6，名称：'Casa'，描述：'desc6'}
];
}
},
模板：`
{{cate.id}
`
})
Vue.组件（“分类卡”{
名称：“分类卡”，
道具：['categoria']，
模板：`
Categoria
{{categoria.nombre}}
{{categoria.descripion}
维瑟维西奥斯酒店
`
})
新Vue({
el:“#应用程序”，
数据：{
消息：“您好，Vue.js！”
}
})
列必须包含在
中。行
@ZimSystem包含在.row中，前面由。container@ZimSystem我只是添加了我的主component@ZimSystem我刚才看到了你的相关问题，确实有必要将col-md-12拆下一排，谢谢