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

Question

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

现在如果我们使用

 <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 是做点什么来实现这一点，还是保持原样？

在应用网格类时有什么好的建议吗？由于 col-xs-* 也可以应用于大屏幕。那么在真正的电梯实际项目中，你是做什么的呢？

谢谢。

Answer 1

要回答这个问题，最好了解一下 Twitter bootstrap 的网格系统是如何工作的

Twitter Bootstrap 如何检测设备

Media queries

我们在 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 的设备，并且在此屏幕尺寸范围内，它将覆盖属于小型设备的规则集em>（按照col-sm-* col-md-*的顺序）。

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

考虑以下结构（Example here）：

<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： 什么都没有。因此，作为块级元素，它会填充其父级的整个宽度。
  • 第二格： .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%; }
  • 第二格： @media (min-width: 992px) .col-md-4 { width: 33.33333333%; }

可以看出，第一个 <div> 在 Extra Small 和 Small 设备上显示为普通块级元素，而在 Medium 设备上 em> 受媒体查询影响。

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

引导程序做一些事情来实现这一点⁽¹⁾ 或者就这样 它是⁽²⁾？

- (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-*">