Bootstrap4中Grid栅格系统CSS中 col-sm- col-md- col-lg- 的意义

注意：如今大部分手机是<576px的,我查阅很多博客看他们好多写的是.col-xs-,我按照那种方法试不行，我用的是bootstrapvue4.3根本没有什么.col-xs- 这一说

于是亲自用浏览器F12手机模式调试，亲测.col-对于手机才可行！这点bootstrap更新了，一定要注意别踩坑！

说明：

1. col- 列；-*表示占列，即占自动每个row分12列栅格系统比；

2. 栅格系统自动将每个row分为12列，col-lg-* 星号所代表的参数表示当前屏幕中该div所占列数.

   例如<div class="col-md-6 col-lg-3"> 这个div 在中等屏幕中占6列（放两个div），但是在大屏幕中占3列（放四个div),如果我们还需要在手机屏幕上并排显示4个div，则再在此基础上加上col-3，有助于解决排版问题;

3. flexbox的网格自动进行布局意味着我们也可只设置一列的宽度，让并排的其他列自动调整大小
   例如：
   

最后，附上一段col-md- col-lg- col-等几者混用的代码和几张效果图：

<template>
  <div class="row">
    <div v-for="course in courses" :key="cid" class="col-6 col-md-3 col-lg-3 ">
      <b-card
        title="Card Title"
        :img-src="course.src"
        img-alt="Image"
        img-top
        tag="article"
        style="max-width: 20rem;"
        class="m-2"
      >
      <b-card-text>
        Some
      </b-card-text>
    </b-card>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return{
        courses:[
          {
            cid: '1',
            title: 'yiyiyi',
            desc: '阿萨德dssedsda',
            src: 'http://www.gulixueyuan.com/files/default/2018/06-15/0918251905f6057842.jpg'
          },
          {
            cid: '2',
            title: 'ererer',
            desc: '阿萨德asdasdasdasdasdasd啊实打',
            src: 'http://www.gulixueyuan.com/files/course/2019/03-26/184214683df1136310.jpg'
          },
          {
            cid: '3',
            title: 'sansansan',
            desc: '阿萨德',
            src: 'http://www.gulixueyuan.com/files/default/2018/06-15/0918146150a9565117.jpg'
          },
          {
            cid: '4',
            title: 'sisisi',
            desc: '阿萨德',
            src: 'http://www.gulixueyuan.com/files/default/2018/06-14/1709051b4c3c309882.jpg'
          },
          {
            cid: '5',
            title: 'wuwuwu',
            desc: '阿萨德dssedsda',
            src: 'http://www.gulixueyuan.com/files/default/2018/06-15/0918251905f6057842.jpg'
          }

        ]
      }
    }
  }
</script>

<style>

</style>

逐渐缩小窗口……

手机模式下: