你使用哪种Bootstrap3的移动端/桌面端网格模式？

Question

Bootstrap 3提供了四种网格模式：

• XS: 超小型设备，如手机（<768px）
• SM: 小型设备，如平板电脑（≥768px）
• MD: 中等尺寸的台式机显示器（≥992px）
• LG: 大尺寸的台式机显示器（≥1200px）

在实际应用中，不是根据屏幕分辨率而是根据设备来决定采用哪种模式。例如，Nexus 5（1920px）采用XS模式，iPad 1（1024px）采用MD模式。

我希望使网站具备响应性，但不使用4种模式（因为网站比较复杂，有些部分在移动设备上根本无法使用——例如包含复杂图像网格的部分）。我只想使用两种模式：一种针对台式机（和平板电脑），另一种针对移动设备。

通过使用Google Canary仿真模式，我发现：

• XS模式适用于 BB Z10 / Z30、HTC Evo、Touch HD、Desire HD、Desire、IPhone 3GS/4/5、Nexus S/4/5、三星Galaxy Note / S3 / S4、Sony Xperia S等设备；
• SM模式适用于Amazon Kindle Fire HD 7和Nexus 7 / 7.2 等设备；
• MD模式适用于BB PlayBook、IPAD 1/2/iPad Mini、IPAD 3/4等设备；
• LG模式适用于Amazon Kindle Fire /Fire HD 8.9英寸和Nexus 10等设备。

（是的，iPad 4带视网膜屏幕采用MD模式，而Kindle Fire则采用LG模式）

我应该在哪个界限上将移动设备与台式机分开？我的意思是：将MD及以下设为移动设备专用，LG设为大型平板电脑和台式机专用？还是将SM作为移动设备专用，其余部分用于大型平板电脑和台式机？......

谢谢！

- 4lberto

---

你在上面提到iPad1使用“md”，我不知道是否正确，但是我确实知道最新的iPad实际上使用了“sm”网格，这让我非常烦恼，有没有办法更改？ - Anthony Webb

你好，我没有真实设备来测试它。该列表是从 Chrome 模拟器详细制作的。据我所知，这是不可能更改的，因为它取决于屏幕分辨率加上设备像素比之间的关系。这个比率在 iPad 1 和 2 中是 1，而对于其他视网膜屏幕则为 3/4。我猜用户可以在浏览器配置中更改它，但你无法要求每个访问你网页的人都这样做... - 4lberto

Answer 1

我认为你误解了网格的使用方式，而且想得太多了。这些尺寸对应着列在何时以及何种大小下堆叠。你可以自由选择和混合使用。

有时在小设备上，将两张图片依次堆叠看起来更好。有时将它们并排放置看起来更好。这取决于情况和内容。

如果你愿意，可以选择响应式或非响应式网格。你可以在图片上使用 img-responsive 类。

我从他们的文档中摘录了这一段： 堆叠到水平

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

“使用一组.col-md-网格类，您可以创建一个基本的网格系统，在移动设备和平板设备（额外小到小范围）上开始堆叠，然后在桌面（中等）设备上变为水平。将网格列放置在任何.row中。当然，您也可以使用媒体查询来更改您想要的任何内容。”

- nil

---

嗨，感谢您的回答。可能我表达得不太对。我的问题源于iPad 4使用SM模式，而像Nexus 10这样的其他平板电脑使用LG模式。对于用户而言，iPad和Nexus 10属于同一类别，并且（从我的角度来看）它们都应该使用更接近LG模式而非SM模式。我想知道的是其他人是否在.col-md-grid中启动“桌面模式”还是在.col-sm-grid中启动它（以便iPad 4显示为桌面），或者在.col-lg-grid上启动它。因此，我的问题在于在哪里设置移动和桌面模式之间的划分（XS、SM、MD或LG）。谢谢！ - 4lberto

@4lberto，我们还要考虑横向和纵向屏幕以及它们在这些设备上的显示方式。我认为你可能想得太多了。对于我个人而言，我认为col-md是标准桌面尺寸。任何低于此尺寸的都是移动布局。而md和大于此尺寸的则视为桌面布局。因此，实际上任何768及以上的都可以。然后我查看，有时候堆叠内容在某些部分不太适用，所以我会相应地更改我的div - xs-col-6，或col-md，甚至混合使用，例如'div class="col-xs-6 col-sm-6 col-md-3'。 - nil

有些设备显示的方式可能出乎意料。因此，你需要尽力而为，找到一个好的折中方案。 - nil

谢谢！那么我将使用MD作为分界线，不再关心适应每个设备。再次感谢！ - 4lberto

4lberto，太好了，我很高兴能帮上忙。别忘了将答案标记为有用或已接受 ;) - nil

Answer 2

我刚在Lynda.com课程上听到一个好观点。首先从最大和最小的开始。如上所述，从最小网格开始。为移动用户设计该布局，然后为桌面浏览器设计最大网格。其余部分是如何分解和适应中等屏幕大小的工作。

- user3094792