bootstrap布局 + vue

想要开发一个响应式布局的页面

1，安装bootstrap-vue

npm install bootstrap-vue bootstrap

1.1，在main.js 里导入

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)

2，使用

// home.vue

  
    

      
        

          {{item.name}}
        
      
    
  

2.1，row 和col 要在container 里面使用。
2.2，循环出来的结果没有横向排列，如下图

2.3，修改row 添加属性 align-h="start" class="row" cols="2" cols-md="6"，
cols 表示，最小容器宽度 一行排两个， md 表示中等宽度
2.4，修改 col ，将循环放到col 里。
个人经过查看之后：循环div ，col 只有一个值，他就会占据一行，如果循环div下有两个col ，这两个就会放一行。
最后修改为：

  
     
        

          {{item.name}}
       
    
  

效果如图：

以上就是 bootstrap-v 布局的基本使用。
使用 bootstrap 的好处是，他可以自适应不同宽度的屏幕，方便开发自适应页面。针对不同的宽度也可以方便修改。

bootstrap-vue 的中文文档：https://code.z01.com/bootstra...