为什么在Twitter Bootstrap 3中需要不同的列类？

Question

我正在学习Twitter Bootstrap 3中的网格,有些东西我不明白......对不起,如果这是一个愚蠢的问题.

据我所知,媒体查询每次都会使容器类的宽度不同,例如.最小宽度为768px的视口使容器类宽度为750像素.....最小宽度为1200px的视口使容器类别为1170px等.

但是,为什么需要为.col-md-2和.col-lg-2等列提供不同的类,因为在这两种情况下,值为8.333333333333332%; 然后.col-md-3和.col-lg-3都是25%,依此类推

750px的25%仍然可以提供与1170px的25%相同的预期

Answer 1

您有四个不同的类,因此您可以有四种不同的布局,具体取决于屏幕大小.

我看到大多数人误解的Bootstrap网格系统的关键部分是你不需要所有四个类 - xs,sm,md和lg.浏览器将采用最小的一个并应用它直到它达到更大的一个.

因此,例如,col-xs-4如果没有应用其他尺寸,则将应用于所有屏幕尺寸.添加col-sm|md|lg-4相同div是完全没必要的.

作为旁注,我也看到col-xs-12 col-sm-4了很多,这也是不必要的.col-xs-12如果您设置sm或更大的类,则暗示.实际上,对于小于所声明的最小尺寸的任何尺寸,暗示了12列.所以,如果你只是放col-lg-4,那么col-xs|sm|md-12暗示.

因此,如果您希望您的布局在所有分辨率下看起来完全相同,请使用xs.如果你想让它在平板电脑上以某种方式显示,但只是堆叠在手机上,那么就使用sm.如果您希望div手机上有3个,平板电脑上有4个,桌面上有6个,那么您需要col-xs-3 col-sm-4 col-md-6.

Answer 2

.col-xs-、.col-sm-、.col-md- 和 .col-lg- 都指的是每个列的不同视口大小，因此您可以在不同设备上设置不同的列。如果您参考此表（http://getbootstrap.com/css/#grid-options），它将显示与每个不同类别相对应的每个尺寸。

基本上它们的外观和行为与您指出的相同，但它们是使用不同的媒体查询设置的，因此它们在这个因素上有所不同。这样您就可以在不同的设备上拥有不同的跨越列。假设您希望中型到大型设备的列跨度为 4，小型/平板电脑设备的列跨度为 6，超小型/手机设备的跨度为 12。您应该只需要担心您的中型和小型设备，在这种情况下，大型设备将从您的中型声明继承它的跨度，如果未设置，超小型设备应自动为 12。（我对最后一部分并不乐观，但看起来就是这样。）

因此，您所要做的就是将 .col-md-4 添加到所有 div 以及 .col-sm-6 中，这将执行上述布局。