bootstraplayout+vue

时间：2023-04-01 00:24:56 vue.js

想开发一个响应式布局页面1、安装bootstrap-vuenpminstallbootstrap-vuebootstrap1.1，在main.js中importimport'bootstrap/dist/css/bootstrap.css'import'bootstrap-vue/dist/bootstrap-vue.css'importBootstrapVuefrom'bootstrap-vue'Vue.use(BootstrapVue)2、使用//home.vue{{item.name}}

2.1、容器中要使用row和col。2.2、循环的结果没有横向排列，如下图2.3，修改行，添加属性align-h="start"class="row"cols="2"cols-md="6"，cols表示容器最小宽度为一行Rowtwo，md表示中等宽度2.4，修改col，将循环放在col中。经过亲测：loopdiv,col只有一个值，会占一行，如果loopdiv下有两个cols，就把这两个放在一行。最后的修改是：

效果如图：以上是bootstrap-v布局的基本使用。使用bootstrap的好处是可以适配不同宽度的屏幕，方便开发自适应页面。它也可以很容易地修改为不同的宽度。bootstrap-vue中文文档：https://code.z01.com/bootstra...