Bootstrap4的Grid栅格系统使用.col-，.col-sm-, .col-md-, .col-lg-等类来定义不同屏幕尺寸下的列布局。在最新版本中，.col-xs-已被移除，取而代之的是通用的.col-，适用于手机屏幕。在中等屏幕（.col-md-）和大屏幕（.col-lg-）上，这些类用于控制元素在12列栅格中的占比。例如，一个元素在中等屏幕占6列，在大屏幕占3列，手机屏幕则可以使用.col-3实现更灵活的布局。理解这些类有助于避免排版问题，并利用Flexbox的自动布局特性。"
113505322,10541807,Python初学者函数实践：从基础到进阶,"['Python基础', '函数编程', '实战教程', '模块导入']
注意：如今大部分手机是<576px的,我查阅很多博客看他们好多写的是.col-xs-,我按照那种方法试不行，我用的是bootstrapvue4.3根本没有什么.col-xs- 这一说
于是亲自用浏览器F12手机模式调试，亲测.col-对于手机才可行！这点bootstrap更新了，一定要注意别踩坑！
说明：
-
col- 列；-*表示占列，即占自动每个row分12列栅格系统比；
-
栅格系统自动将每个row分为12列，col-lg-* 星号所代表的参数表示当前屏幕中该div所占列数.
例如
<div class="col-md-6 col-lg-3">这个div 在中等屏幕中占6列（放两个div），但是在大屏幕中占3列（放四个div),如果我们还需要在手机屏幕上并排显示4个div，则再在此基础上加上col-3，有助于解决排版问题; -
flexbox的网格自动进行布局意味着我们也可只设置一列的宽度，让并排的其他列自动调整大小
例如：
最低0.47元/天 解锁文章
扫一扫
375
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
