当网格类适用于具有较小断点大小的设备时会发生什么 [英] What happens when grid classes apply to devices with smaller breakpoint size

问题描述

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

它将在一行上布置为三列，当我们缩小屏幕尺寸时，

所以我的问题是：做引导程序做某事，使它发生或只是离开它？ p>

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

谢谢。

解决方案

Twitter Bootstrap如何检测设备

$ b b $ b

媒体查询

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

  / *超小设备（手机，小于768像素）* / 
 / *没有媒体查询，因为这是Bootstrap中的默认值* / 
 
 / *小设备（平板电脑，768px及以上）* / 
 @media（min-width：@ screen-sm -min）{...} 
 
 / *中型设备（台式机，992px及以上）* / 
 @media（min-width：@ screen-md-min）{.. 。} 
 
 / *大型设备（大型桌面，1200像素及以上）* / 
 @media（min-width：@ screen-lg-min）{...} 
  

使用 min-width 块将应用于高于断点值的所有屏幕宽度。

例如用于中型设备的CSS规则集将应用于屏幕宽度大于或等于 992px 的设备。在此屏幕大小范围内，属于小设备（符合 col-sm- * col-md - * 的顺序）的规则集。

对于额外的小型设备，CSS规则集不是由媒体查询指定的。即它们通常位于样式表中，除非被 @media 覆盖，它们将应用于元素，无论设备的屏幕宽度是多少考虑以下结构（

nofollow> ））：

 < 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：因此，作为块级元素，它填充其父元素的整个宽度。
  
  
  • second div： .col-xs-6 { width：50％; }
    
    
    
  
  


• >
  
  
  
  • 第一个div：没有。因此，作为块级元素，它填充其父元素的整个宽度。
  
  
  • second div： .col-xs-6 { width：50％; }
    
    
    
  
  


• >
  
  
  
  • 第一个div： @media（min-width：992px）.col-md-8 {width：66.66666667 ％; }
  
  
  • second div： @media（min-width：992px）.col-md-4 {width：33.33333333％; }
    
    
    
  
  


• >
  
  
  
  • 第一个div： @media（min-width：992px）.col-md-8 {width：66.66666667 ％; }
  
  
  • second div： @media（min-width：992px）.col-md-4 {width：33.33333333％; }

  


和小设备上显示< div>

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

让引导程序做某事使 （1） 发生，或者将它作为
，它是 ^2） ？

- （2）

何时/何处应用网格类

实际上，这取决于你。但是，由于 col-xs- *也可以应用于大屏幕，这并不意味着应或必须

如果您需要在额外小型设备上将列拆分为垂直块，请从 col-sm - * 网格类。或者如果您想在小设备上实现，请使用 col-md - * 或 col-lg - * 。

使用 col-lg - * code> col-md - * 在大型设备上。只需确保类的顺序如下：

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

Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.

Now if we use

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

It will layout as three columns on a row, when we narrow down the screen size, it will break into three vertical blocks.

So my question is: Do bootstrap do something to make that happen or just leave it as it is?

Any good suggestions when we apply grid classes? Since col-xs-* can also be applied to large screens. So in real lift real project, what does you do?

Thanks.

解决方案

To answer this question, It's better to understand the way which Twitter bootstrap's grid system work

How Twitter Bootstrap detects devices

Media queries

We use the following media queries in our Less files to create the key breakpoints in our grid system.

/* 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) { ... }

By the use of min-width, the following code block would be applied to all screen widths which are higher than the breakpoint value.

E.g. CSS rulesets for medium devices would be applied to devices with screen widths greater than or equal to 992px And in this range of screen sizes, it would override the rulesets belonging to small devices (In compliance with the order of col-sm-* col-md-*).

And for extra small devices, CSS rulesets are not specified by media queries. I.e they're places normally within the stylesheet and they would be applied to elements no matter what the screen width of the device is, unless it get overridden by a @media query.

Considering the following structure (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>

The Applied CSS would be:

• On extra small devices
  • first div: Nothing. Hence, as a block level element it fills the entire width of its parent.
  • second div: .col-xs-6 { width: 50%; }
    
    
• On small devices
  • first div: Nothing. Hence, as a block level element it fills the entire width of its parent.
  • second div: .col-xs-6 { width: 50%; }
    
    
• On medium devices
  • first div: @media (min-width: 992px) .col-md-8 { width: 66.66666667%; }
  • second div: @media (min-width: 992px) .col-md-4 { width: 33.33333333%; }
    
    
• On large devices
  • first div: @media (min-width: 992px) .col-md-8 { width: 66.66666667%; }
  • second div: @media (min-width: 992px) .col-md-4 { width: 33.33333333%; }

As can be seen, the first <div> is displayed as a normal block level element on Extra Small and Small devices while on Medium devices it's affected by the media query.

Therefore, if you decrease the window size to less than 992px, the first <div> will fill the whole of horizontal space within its parent element.

Do bootstrap do something to make that happen⁽¹⁾ or just leave it as it is⁽²⁾?

- (2) is correct: it just leaves it as it is.

When/Where to apply grid classes

Actually it's up to you. However just because col-xs-* can also be applied to large screens, it doesn't mean that it should be or must be.

If you need to break the columns into vertical blocks on extra small devices, start from col-sm-* grid classes. Or if you want to achieve that on small devices, use col-md-* or col-lg-* classes.

And by using col-lg-* you'll override the col-md-* on large devices. Just make sure the order of classes is like so:

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

这篇关于当网格类适用于具有较小断点大小的设备时会发生什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！