为什么使用 div 不使用 bootstrap 4 堆叠 div [重复]答案

【问题标题】：why with divs do not stack the div with bootstrap 4 [duplicate]为什么使用 div 不使用 bootstrap 4 堆叠 div [重复]
【发布时间】：2018-12-02 01:10:00
【问题描述】：

我正在开发 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>

【问题讨论】：

列必须包含在.row中
@ZimSystem 包含在 .row 和之前的 .container 中
@ZimSystem 我刚刚添加了我的主要组件
@ZimSystem 刚看到你的相关问题，确实有必要删除.row的col-md-12，谢谢

标签： javascript vue.js bootstrap-4

【解决方案1】：

它似乎工作正常：

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

查看sn-p：

<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"/> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>

</head>
<body>

<div id="app">
  <main2></main2>
</div>

<script>


Vue.component('main2', {
  name : 'MainBarber',
        data(){
            return {
                categorias : []
            }
        },
        mounted(){
            this.getCategorias();
        },
        methods : {
            getCategorias(){
				console.log("categorias");
                this.categorias = [
					{id : 1, nombre : 'Esportivo', descripcion : 'desc1'}, 
					{id : 2, nombre : 'Infos', descripcion : 'desc2'}, 
					{id : 3, nombre : 'Politica', descripcion : 'desc3'},
					{id : 4, nombre : 'Moda', descripcion : 'desc4'}, 
					{id : 5, nombre : 'Cocina', descripcion : 'desc5'}, 
					{id : 6, nombre : 'Casa', descripcion : 'desc6'}					
					];
            }
        },
  template: `<div class="row">
				<categoria-card  v-for="cate in categorias"  
                    :categoria=cate :key="cate.id">{{cate.id}}
				</categoria-card>
			</div>`

})
Vue.component('categoria-card', {
		name : 'categoria-card',
        props : ['categoria'],
		template: `<div class="col-4">
        <div class="card card-image"  >
            <div class="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>`

})

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

</script>




</body>
</html>

【讨论】：