bootstrap中col-lg- ，col-md- 和col-sm- *之间有什么区别？

作者: 小蚊子
发布时间: 2024-07-09 12:39:31 (25天前)
转自：

9 条回复

0#
回复此人
Colin | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 一个特例：在学习bootstrap网格系统之前，请确保将浏览器缩放设置为100％（百分之百）。例如：如果屏幕分辨率为（1600px x 900px）且浏览器缩放率为175％，则将堆叠“bootstrap-ped”元素。 </p> <P> 的<strong> HTML </强> </p> <pre> <code> <div class="container-fluid"> <div class="row"> <div class="col-lg-4">class="col-lg-4"</div> <div class="col-lg-4">class="col-lg-4"</div> </div> </div> </code> </pre> <P> 的<strong> Chrome缩放100％ </强> </p> <P> <a href="https://i.stack.imgur.com/0aFsZ.png" rel="nofollow noreferrer"> 浏览器100％ - 水平放置的元素 </A> </p> <P> 的<strong> Chrome缩放175％ </强> </p> <P> <a href="https://i.stack.imgur.com/rN3FR.png" rel="nofollow noreferrer"> 浏览器175％ - 堆叠元素 </A> </p> </DIV>

编辑
1#
回复此人
青阳 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 好吧它用于告诉bootstrap根据屏幕大小连续放置多少列 - </p> <pre> <code> col-xs-2 </code> </pre> <P> 在超小（xs）屏幕中连续显示2列，与sm定义小屏幕相同，md（中等大小），lg（大尺寸），但如果你提到，根据bootstrap较小的第一条规则 </p> <pre> <code> xs-col-2 md-col-4 </code> </pre> <P> 然后每行显示2列，屏幕尺寸从xs到sm（包括），并在下一个尺寸时更改，即md到lg（包括）为了更好地理解屏幕尺寸，请尝试在chrome的开发人员模式（ctr + shift + i）中以各种屏幕模式运行它们并尝试使用各种像素或设备 </p> </DIV>

编辑
2#
回复此人
尼拉。 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 的<strong> 设备大小和类前缀： </强> </p> <UL> <LI> 超小型设备电话（<768px） - <code> .col-xs- </code> </LI> <LI> 小型设备平板电脑（≤768px） - <code> .col-sm- </code> </LI> <LI> 中型设备台式机（≤992px） - <code> .col-md- </code> </LI> <LI> 大型设备台式机（≤1200px） - <code> .col-lg- </code> </LI> </UL> <P> 的<strong> 网格选项： </强> </p> <P> <a href="https://i.stack.imgur.com/nyqbS.png" rel="noreferrer"> <img src =“https://i.stack.imgur.com/nyqbS.png”alt =“Bootstarp网格系统”/> </A> </p> <P> 参考： <a href="http://getbootstrap.com/css/#grid" rel="noreferrer"> 网格系统 </A> </p> </DIV>

编辑
3#
回复此人
⑩Ⅵ嵗Ｄ夨憶 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 的<strong> TL; DR </强> </p> <P> <code> .col-X-Y </code> 手段 <EM> 屏幕尺寸X及以上 </EM> ， <EM> 拉伸此元素以填充Y列 </EM> 。 </p> <P> Bootstrap提供每列12列的网格 <code> .row </code> ，所以Y = 3表示宽度= 25％。 </p> <P> <code> xs, sm, md, lg </code> 分别是智能手机，平板电脑，笔记本电脑，台式机的尺寸。 </p> <P> 在不同的屏幕尺寸上指定不同宽度的关键是让你在较小的屏幕上做大。 </p> <P> 的<strong> 例 </强> </p> <pre> <code> <div class="col-lg-6 col-xs-12"> </code> </pre> <P> 含义：桌面上的宽度为50％，移动，平板电脑和笔记本电脑的宽度为100％。 </p> </DIV>

编辑
4#
回复此人
梦中会飞的鱼 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 从 <a href="http://getbootstrap.com/getting-started/#migration-new" rel="noreferrer"> Twitter Bootstrap文档 </A> ： </p> <UL> <LI> 小格（铌 768px）= <code> .col-sm-* </code> ， </LI> <LI> 中等网格（ 992px）= <code> .col-md-* </code> ， </LI> <LI> 大网格（≤1200px）= <code> .col-lg-* </code> 。 </LI> </UL> </DIV>

编辑
5#
回复此人
LOGO | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <pre> <code> .col-xs-$聽 Extra Small聽 Phones Less than 768px聽 .col-sm-$聽 Small Devices聽 Tablets 768px and Up聽 .col-md-$聽 Medium Devices聽 Desktops 992px and Up聽 .col-lg-$聽 Large Devices聽 Large Desktops 1200px and Up聽 </code> </pre> </DIV>

编辑
6#
回复此人
Gassyc加西可 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我认为令人困惑的一点是，BootStrap 3是一个移动的第一个响应系统，无法解释这是如何影响Bootstrap文档中该部分的col-xx-n层次结构的。这让您想知道如果您为较大的设备选择一个值，并且您想知道是否需要指定多个值，小型设备上会发生什么。（你没有） </p> <P> 我会试图通过陈述......来澄清这一点。较低的颗粒类型（xs，sm）尝试在较小的屏幕上保留布局外观，较大的类型（md，lg）将仅在较大的屏幕上正确显示，但会将列包裹在较小的设备上。在先前示例中引用的值指的是引导程序降低外观以适合可用屏幕区域的阈值。 </p> <P> 这在实践中的意思是，如果你制作列col-xs-n，那么即使在非常小的屏幕上它们也会保持正确的外观，直到窗口下降到一个如此限制的大小，以至于页面无法正确显示。这应该意味着宽度为768px或更小的设备应该按照您的设计显示您的表，而不是降级（单个或包裹的列形式）。显然这仍然取决于列的内容，这是重点。如果页面试图在一个小屏幕上并排显示多列大数据，那么如果您没有考虑它，列将自然地以一种可怕的方式包裹。因此，根据列中的数据，您可以确定布局被亵渎的点，以充分显示内容。 </p> <P> 例如如果您的页面包含三个col-sm-n列，则当页面宽度低于992px时，bootstrap会将列包装成行。这意味着数据仍然可见，但需要垂直滚动才能查看。如果您不希望布局降级，请选择xs（只要您的数据可以在三列中的较低分辨率设备上充分显示） </p> <P> 如果数据的水平位置很重要，那么您应该尝试选择较低的粒度值以保持视觉特性。如果位置不太重要但页面必须在所有设备上都可见，则应使用更高的值。 </p> <P> 如果选择col-lg-n，则列将正确显示，直到屏幕宽度低于xs阈值1200px。 </p> </DIV>

编辑
7#
回复此人
关于贤的记忆 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 引导程序 <a href="http://getbootstrap.com/css/#grid"> 文档 </A> 解释它，但它仍然需要我一段时间才能得到它。当我以两种方式之一向自己解释时，它更有意义： </p> <P> 的<strong> 如果您想到水平开始的列，那么您可以选择何时堆叠 </强> 。 </p> <P> 例如，如果您从列开始： A B C. </p> <P> 您决定何时堆叠如下： </p> <P> 一个 </p> <P> 乙 </p> <P> C </p> <P> 如果选择col-lg，则当宽度为＆lt;时，列将堆叠。 1200像素。 </p> <P> 如果选择col-md，则当宽度为＆lt;时，列将堆叠。 992px。 </p> <P> 如果选择col-sm，那么当宽度为＆lt;时，列将堆叠。 768px。 </p> <P> 如果选择col-xs，那么列将永远不会堆叠。 </p> <P> 的<strong> 另一方面，如果您考虑堆叠的列，那么您可以选择它们变为水平的点 </强> ： </p> <P> 如果选择col-sm，则当宽度> = 768px时，列将变为水平。 </p> <P> 如果选择col-md，则当宽度> = 992px时，列将变为水平。 </p> <P> 如果选择col-lg，则当宽度> = 1200px时，列将变为水平。 </p> </DIV>

编辑

登录后才能参与评论

bootstrap中col-lg- *，col-md- *和col-sm- *之间有什么区别？

bootstrap中col-lg- ，col-md- 和col-sm- *之间有什么区别？