使用多个引导程序列大小的目的是什么？ [英] What is the purpose of using multiple bootstrap column sizes?

问题描述

我对Bootstrap相当陌生，并且了解Bootstrap如何使用12列网格。当我想利用Bootstrap网格时，我通常会这样做：

 < div class =row> ; 
< div class =col-md-6> 
 ... 
< / div> 
< div class =col-md-6> 
 ... 
< / div> 
< / div> 
  

我也明白不同的列大小可用于不同的屏幕尺寸。

 < div class =row> 
< div class =col-xs-6> 
 ... 
< / div> 
< div class =col-xs-6> 
 ... 
< / div> 
< / div> 
  

然而，我看到很多人做了类似的事情：

 < div class =row> 
< div class =col-xs-6 col-md-6 col-lg-6> 
 ... 
< / div> 
< div class =col-xs-6 col-md-6 col-lg-6> 
 ... 
< / div> 
< / div> 
  

为什么要使用多个列大小？浏览器会检测哪一个适合使用？

解决方案

在这个例子中，完全没有理由拥有所有三个类：

 < div class =row> 
< div class =col-xs-6 col-md-6 col-lg-6> 
 ... 
< / div> 
< div class =col-xs-6 col-md-6 col-lg-6> 
 ... 
< / div> 
< / div> 
  

实际上与此相同：

 < div class =row> 
< div class =col-xs-6> 
 ... 
< / div> 
< div class =col-xs-6> 
 ... 
< / div> 
< / div> 
  

Bootstrap网格类适用于指定大小以上的所有大小，因此应用 col -xs-6 会导致该元素在任何更大的屏幕尺寸上也包含6列，比如sm，md等。我猜测在第一个例子中包括所有三个类的人不会对bststrap网格系统的工作原理有一个明确的理解。

如果你希望元素在不同的屏幕尺寸上有不同的大小，你只需要包含多个类： / p>

 < div class =row> 
< div class =col-xs-4 col-md-3 col-lg-2> 
 ... 
< / div> 
< div class =col-xs-8 col-md-9 col-lg-10> 
 ... 
< / div> 
< / div> 
  

I'm fairly new to Bootstrap, and I understand how Bootstrap uses a 12-column grid. When I want to make utilize a Bootstrap grid, I traditionally do it like this:

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

I also understand that different column sizes are used for different screen sizes

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

However, I've seen a lot of people do something similar to this:

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

Why use multiple column sizes? Will the browser detect which one is appropriate to use?

解决方案

There is absolutely no reason to have all three classes in this example:

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

It is effectively the same as this:

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

Bootstrap grid classes work on all sizes above the size specified, so applying col-xs-6 will cause that element to also contain 6 columns on any larger screen sizes, like sm, md, etc. I'm guessing that whoever is including all three classes in the first example does not have a firm understanding of how the Bootstrap grid system works.

You only need to include multiple classes if you want the element to be a different size on different screen sizes:

<div class="row">
    <div class="col-xs-4 col-md-3 col-lg-2">
    ...
    </div>
    <div class="col-xs-8 col-md-9 col-lg-10">
    ...
    </div>
</div>

这篇关于使用多个引导程序列大小的目的是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！