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

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>

它将在一行上布置为三列,当我们缩小屏幕尺寸时,它将分成三个垂直块.

所以我的问题是:引导程序是否做了一些事情来实现这一点,或者只是保持原样？

我们应用网格类时有什么好建议吗？由于col-xs-*也可以应用于大屏幕.那么在真正的电梯真实项目中,你做了什么？

谢谢.

Answer 1

要回答这个问题,最好先了解一下Twitter bootstrap网格系统的工作方式

Twitter Bootstrap如何检测设备

媒体查询

我们在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.在此屏幕尺寸范围内,它将覆盖属于小型设备的规则集(符合顺序col-sm-* col-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>

Applied 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和Small设备上显示为普通的块级元素,而在Medium设备上则受媒体查询的影响.

因此,如果将窗口大小减小到小于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-*">