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

Question

网格类应用于屏幕宽度大于或等于断点大小的设备，并覆盖针对较小设备的网格类。因此，将任何.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>

它将在一行中布局为三列，当我们缩小屏幕大小时，它将分解为三个垂直块。

所以我的问题是：引导程序是做了什么来实现这一点，还是保持原样

当我们应用网格类时，有什么好的建议吗？由于colxs-*也可以应用于大屏幕。所以，在真正的电梯真正的项目，你是做什么的？

谢谢。

Answer 1

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

Twitter引导程序如何检测设备

媒体查询

我们在Less文件中使用以下媒体查询来创建密钥网格系统中的断点。

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

通过使用min-width，以下代码块将应用于高于断点值的所有屏幕宽度。

例如，中型设备的CSS规则集将应用于屏幕宽度大于或等于992px的设备。在这个屏幕大小范围内，它将覆盖属于小型设备

对于超小型设备，CSS规则集不是由媒体查询指定的。I.e它们通常位于样式表中，无论设备的屏幕宽度是多少，它们都会应用于元素，除非它被@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>

应用CSS是：

• 在超小型设备上
  • 第一个div：什么都没有。因此，作为块级元素，它填充其父元素的整个宽度
  • 第二个div：.col-xs-6 { width: 50%; }
    
    
• 在小型设备上
  • 第一个div：什么都没有。因此，作为块级元素，它填充其父元素的整个宽度
  • 第二个div：.col-xs-6 { width: 50%; }
    
    
• 在介质设备上
  • 第一个div：@media (min-width: 992px) .col-md-8 { width: 66.66666667%; }
  • 第二个div：@media (min-width: 992px) .col-md-4 { width: 33.33333333%; }
    
    
• 在大型设备上
  • 第一个div：@media (min-width: 992px) .col-md-8 { width: 66.66666667%; }
  • 第二个div：@media (min-width: 992px) .col-md-4 { width: 33.33333333%; }

可以看出，第一个<div>在Extra Small和Smalldevices上显示为正常块级元素，而在Medium devices上则受媒体查询的影响。

因此，如果将窗口大小减小到小于992px，则第一个<div>将填充其父元素内的整个水平空间。

bootstrap是否做了一些事情来实现这一点^（1）或将其保留为是^（2）？

-（2）是正确的：它只是保持原样。

何时/何地应用网格类

实际上这取决于你。然而，仅仅因为col-xs-* can also be applied to large screens，并不意味着它应该是或必须是

如果需要在超小型设备上将列分解为垂直块，请从col-sm-*网格类开始。或者，如果您想在小型设备上实现这一点，请使用col-md-*或col-lg-*类。

通过使用col-lg-*，您将覆盖大型设备上的col-md-*。只要确保类的顺序是这样的：

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