布局的时候什么时候用xs,sm,md,lg?

太过爱你忘了你带给我的痛 2022-05-09 09:40 116阅读 0赞

参考知乎等网上资料，整理的！

当你想要内容大小随着屏幕大小自动适应的时候就可以使用bootstrap，也就是在pc端以及不同手机（显示屏大小不同）端内容也能够正常显示的时候。  
一行最多占十二个标签，不管是大屏还是超小屏的时候。

col-lg一般用于大屏设备，  
(min-width:1200px);

col-md一般用于中屏设备，  
(min-width：992px);

col-sm一般用于小屏设备，  
(min-width：768px);

col-xs用于超小型设备，  
(max-width：768px);

后面跟数字是几，也就是占几份（每个占据12份中的几份）,  
比如是4，也就是一行可以显示3个;  
或者12，就是一行可以显示1个。

关于使用，一般设置的话四个属性都用到会比较好，这样就可以在不同屏幕上很好的展示。  
比如你有了12个section标签，你想让他们在不同屏幕大小的时候有不同的展示方式，大屏时一行显示6个，中屏时一行显示3个，小屏时一行展示2个，超小屏一行展示1个，你就可以在每一个section标签里面这样写:  
<section class = “col-lg-2 col-md-4 col-sm-6 col-xs-12”></section>

HTML代码：

<div class="col-xs-12 col-sm-9 col-md-6 col-lg-3">
                            
    </div>

当屏幕尺寸

小于 768px 的时候，用 col-xs-12 类对应的样式；

在 768px 到 992px 之间的时候，用 col-sm-9 类对应的样式；

在 992px 到 1200px 之间的时候，用 col-md-6 类对应的样式；

大于 1200px 的时候，用 col-lg-3 类对应的样式；

参考[https://blog.csdn.net/wdr2003/article/details/79789228][https_blog.csdn.net_wdr2003_article_details_79789228]

[https_blog.csdn.net_wdr2003_article_details_79789228]: https://blog.csdn.net/wdr2003/article/details/79789228

发表评论取消回复

表情：

评论列表（有 0 条评论，116人围观）

还没有评论，来说两句吧...

相关阅读

相关在做机试题的时候，什么时候用DFS，什么时候用BFS？

FS和BFS都是图的遍历的两种形式。 DFS的特点是不具有BFS中按层次顺序遍历的特性，所以DFS不具有最优性。DFS因此常用来求解有没有的问题。DFS所得到的解不一定...

秒速五厘米/ 2024年04月17日 06:30/ 0 赞/ 125 阅读

相关什么时候用Goroutine？什么时候用Channel？

> 作者：王中阳 > 来源：公众号「程序员升级打怪之旅」 > 转载请联系授权（微信ID：wangzhongyang1993） > 原文地址：https://juej

Love The Way You Lie/ 2024年04月06日 12:58/ 0 赞/ 142 阅读

相关【Java】什么时候用 Runnable？什么时候用 Callable ？

文章目录前言 Runnable Callable 如何选择用哪一个最后前言提到 Java 就不得不说多线程了，就算你不想说，

妖狐艹你老母/ 2023年10月14日 17:46/ 0 赞/ 109 阅读

相关 mybatis什么时候用resulttype 什么时候用resultmap

如果你搜索只是返回一个值，比如说String ，或者是int，那你直接用resultType就行了。但是你如果是返回一个复杂的对象，就必须定义好这个对象的re

Dear 丶/ 2022年12月24日 09:53/ 0 赞/ 251 阅读

相关 mysql什么时候用in，什么时候用exists

目录写在前面给你答案 in exists 结论 -------------------- 写在前面网上看帖子的时候，经常会看到说尽量用exists，少

逃离我推掉我的手/ 2022年10月23日 08:10/ 0 赞/ 90 阅读

相关什么时候用堆，什么时候用栈？

[点击打开链接][Link 1] 参考文章：《c++面试题之内存分配》见附录一：一、首先，回顾一下c、c++的内存分配机制。一个C、C++程序

浅浅的花香味﹌/ 2022年09月23日 03:46/ 0 赞/ 296 阅读

相关 angularjs里什么时候加{{}} 什么时候不用？

<div ng-controller = "Aaa"> <input type="button" value="{ {text}}" ng

女爷i/ 2022年08月23日 04:57/ 0 赞/ 246 阅读

相关什么时候用@Resource，什么时候用@service

Spring中什么时候用@Resource，什么时候用@service 当你需要定义某个类为一个bean，则在这个类的类名前一行使用@Service(“XXX”),就相当于讲

た入场券/ 2022年07月16日 15:19/ 0 赞/ 295 阅读

相关布局的时候什么时候用xs,sm,md,lg?

参考知乎等网上资料，整理的！当你想要内容大小随着屏幕大小自动适应的时候就可以使用bootstrap，也就是在pc端以及不同手机（显示屏大小不同）端内容也能够正常显示的

太过爱你忘了你带给我的痛/ 2022年05月09日 09:40/ 0 赞/ 117 阅读

相关 mybatis什么时候用resulttype 什么时候用resultmap

[https://www.cnblogs.com/panxuejun/p/6148903.html][https_www.cnblogs.com_panxuejun_p_614

左手的ㄟ右手/ 2022年02月25日 06:46/ 0 赞/ 356 阅读