我正在学习 Twitter Bootstrap 3 中的网格，但有些东西我不明白……抱歉，如果这是一个愚蠢的问题。
我了解媒体查询每次都会使容器类的宽度不同，例如。最小宽度为 768 像素的视口使容器类的宽度为 750 像素。 ....最小宽度为 1200 像素的视口使容器类为 1170 像素等。
但是，为什么需要为 .col-md-2 和 .col-lg-2 等列设置不同的类，因为在这两种情况下，值都是 8.33333333333332%；然后 .col-md-3 和 .col-lg-3 都是 25% 等等
750px 的 25% 仍然会按比例为您提供与 1170px 的 25% 相同的比例
【问题讨论】：
标签： html css twitter-bootstrap twitter-bootstrap-3
您有四个不同的类，因此您可以有四种不同的布局，具体取决于屏幕大小。
我看到大多数人误解的 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。
【讨论】：
.col-xs-、.col-sm-、.col-md- 和 .col-lg- 都指的是不同的视口大小，每个列都有不同的视口大小，因此您可以在不同的设备上设置不同的列。如果您参考此表 (http://getbootstrap.com/css/#grid-options)，它将显示与每个不同类别相对应的每个尺寸。
基本上它们的外观和行为与您指出的相同，但它们是使用不同的媒体查询设置的，因此它们在这个因素上有所不同。这样您就可以在不同的设备上拥有不同的跨栏。假设您喜欢中型到大型设备的列跨度为四，小型/平板设备的跨度为六，超小型/电话设备的跨度为十二。在这种情况下，您只需要担心您的中型和小型设备，大型设备将从您的中型声明继承它的跨度，如果未设置，超小型设备应自动为 12。 （我对最后一部分并不积极，但似乎就是这样。）
因此，您只需将 .col-md-4 添加到所有 div 以及 .col-sm-6 即可执行上述布局。
【讨论】：