Css 当网格类应用于断点大小较小的设备时会发生什么

网格类应用于屏幕宽度大于或等于断点大小的设备，并覆盖针对较小设备的网格类。因此，将任何.col md-class应用于元素不仅会影响中型设备上的样式，而且如果没有.col lg-class，也会影响大型设备上的样式

现在如果我们使用

 <div class="col-lg-4">div 1</div>
 <div class="col-lg-4">div 1</div>
 <div class="col-lg-4">div 1</div>

它将以一行三列的形式布局，当我们缩小屏幕尺寸时，它将分成三个垂直块

所以我的问题是：bootstrap是否做了一些事情来实现这一点，还是保持原样

当我们应用网格类时，有什么好的建议吗？因为X列-*也可以应用于大屏幕。所以在真实的项目中，你们做什么

---

谢谢。

要回答这个问题，最好了解Twitter引导的网格系统的工作方式

Twitter引导如何检测设备 我们在Less文件中使用以下媒体查询来创建密钥 网格系统中的断点

/*超小型手机，小于768px*/ /*没有媒体查询，因为这是引导中的默认设置*/ /*小型设备平板电脑、768px及以上*/ @媒体最小宽度：@screen sm min{…} /*中型设备台式机，992px及以上*/ @媒体最小宽度：@screen md min{…} /*大型设备大型台式机，1200像素及以上*/ @媒体最小宽度：@screen lg min{…} 通过使用min width，以下代码块将应用于高于断点值的所有屏幕宽度

例如，中型设备的CSS规则集将应用于屏幕宽度大于或等于992px的设备，并且在该屏幕大小范围内，它将按照列sm-*列md-*的顺序覆盖属于小型设备的规则集

对于超小型设备，媒体查询不指定CSS规则集。也就是说，它们通常位于样式表中，并且无论设备的屏幕宽度如何，它们都将应用于元素，除非它被@media查询覆盖

考虑到以下结构：

---

要回答这个问题，最好了解Twitter引导的网格系统的工作方式

Twitter引导如何检测设备 我们在Less文件中使用以下媒体查询来创建密钥 网格系统中的断点

/*超小型手机，小于768px*/ /*没有媒体查询，因为这是引导中的默认设置*/ /*小型设备平板电脑、768px及以上*/ @媒体最小宽度：@screen sm min{…} /*中型设备台式机，992px及以上*/ @媒体最小宽度：@screen md min{…} /*大型设备大型台式机，1200像素及以上*/ @媒体最小宽度：@screen lg min{…} 通过使用min width，以下代码块将应用于高于断点值的所有屏幕宽度

例如，中型设备的CSS规则集将应用于屏幕宽度大于或等于992px的设备，并且在该屏幕大小范围内，它将按照列sm-*列md-*的顺序覆盖属于小型设备的规则集

对于超小型设备，媒体查询不指定CSS规则集。也就是说，它们通常位于样式表中，并且无论设备的屏幕宽度如何，它们都将应用于元素，除非它被@media查询覆盖

考虑到以下结构：

<div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<div class="col-xs-* col-sm-* col-md-* col-lg-*">