Bootstrap 3带有4种网格模式：

> XS：超小型设备电话(< 768px)
> SM：小型设备平板电脑(≥768px)
> MD：中型设备台式机(≥992px)
> LG：大型设备台式机(≥1200px)

在现实世界中,它不依赖于屏幕分辨率,而是依赖于设备.例如,Nexus 5(1920px)使用XS,而iPad 1(1024px)使用MD.

我想使网站响应,但不使用4种模式(因为网站很复杂,有些部分根本不可用于移动设备 – 即图像的复杂网格 – ).我只想使用2种模式：一种用于桌面(和平板电脑),另一种用于移动设备.

使用Google Canary Emulation模式我发现：

> XS：BB Z10 / Z30; HTC Evo,Touch HD,Desire HD,Desire; iPhone 3GS / 4/5; Nexus S / 4/5;三星Galaxy Note / S3 / S4;索尼Xperia S.
> SM：亚马逊Kindle Fire HD 7; Nexus 7 / 7.2
> MD：BB PlayBook; IPAD 1/2 / iPad Mini; IPAD 3/4
> LG：亚马逊Kindle Fire / Fire HD 8.9“; Nexus 10

(是的,Ipad 4与Retina是MD,但Kindle Fire是LG)

我应该在哪里设置移动和桌面之间的限制？我的意思是：MD和以下的移动设备和LG的平板电脑和台式机？或SM用于手机,其余用于大型平板电脑/台式机？…

谢谢！

最佳答案 我认为你误解了网格是如何被使用的,你就是在过度思考网格.大小对应于列堆叠的方式和大小.您可以选择并混合它.

有时它在小型设备上看起来更好,一个接一个地堆叠两个图像.有时将它们并排放置看起来更好.只是取决于环境和内容.

如果您愿意,可以选择响应式或非响应式网格.您可以选择在图像上使用img-responsive类.

我从他们的文档中解除了这一点：

堆积对水平

http://getbootstrap.com/css/#grid

“使用一组.col-md-网格类,您可以创建一个基本的网格系统,在桌面(中型)设备上变为水平之前,首先堆叠在移动设备和平板设备上(从小到小的范围).任何.row中的网格列.“

当然,您可以使用媒体查询来更改您想要的任何内容.