我正在学习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％相同的预期
答案 0 :(得分：22)
您有四个不同的类，因此您可以拥有四种不同的布局，具体取决于屏幕大小。
我看到大多数人误解的Bootstrap网格系统的关键部分是你不需要所有四个类 - xs，sm，md和lg。浏览器将采用最小的浏览器并应用它直到它达到更大的值。
因此，例如，如果没有应用其他尺寸，col-xs-4将应用于所有屏幕尺寸。将col-sm|md|lg-4添加到同一div是完全没必要的。
作为旁注，我也看到了很多col-xs-12 col-sm-4，这也是不必要的。如果您设置了sm或更大的类，则隐含col-xs-12。实际上，对于小于所声明的最小尺寸的任何尺寸，暗示了12列。因此，如果你只是放col-lg-4，则隐含col-xs|sm|md-12。
因此，如果您希望布局在所有分辨率下看起来完全相同，只需使用xs即可。如果你想让它在平板电脑上以某种方式显示，但只是堆叠在手机上，那么就使用sm。如果您希望div在手机上为3，在平板电脑上为4，在台式机上为6，那么您需要col-xs-3 col-sm-4 col-md-6。
答案 1 :(得分：1)
.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中，这将执行上述布局。