代码之家 › 专栏 › 技术社区 › DarkFenix

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

bootstrap-4 vue.js javascript

DarkFenix · 技术社区 · 7 年前

bootstrap 3 to bootstrap 4 cols no longer horizontal-aligned[重复]。

<template>
<DIV class=“卡片图像”>
<STRONG>分类</STRONG>
<h3 class=“py-3 font-weight bold”>
</h3>
</DIV>
</template>
道具:【分类】





会发生这种事吗?


</DIV>




Bootstrap 4.0 Grid System Layout not working


   
    我正在处理VueJS和Bootstrap4中的两个基本组件,问题是我的DIV分配了类.col-md-4,以便为每行添加3个元素,但这不会发生,实际上每行只添加1个元素。
   
   
    
    
   
   <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>

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

1 回复 | 直到 7 年前

Guillaume Georges 7 年前

当出现以下情况时,它似乎工作正常:

col-md4 col-4
col-md-12 具有 row

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