css - iphone 和 ipad 的 Bootstrap 列是相同的，如何获得另一个尺寸

Question

我一直在开发一个 bootstrap 网站，我发现了 1 个非常大的缺陷，它将平板电脑尺寸视为手机尺寸，col-xs-x(768 像素及以下)同样适用于 iphone 和 ipad。

http://www.think.darkstarmedia.net/

在我的设计中，我为台式机和平板电脑尺寸使用 2 列，一旦在手机尺寸中我希望它为 1 列，但 Bootstrap 无法做到这一点

我知道我可以创建完全相同内容的 2 个副本并使用媒体查询(例如 display:none、display:block)并将它们交换为 480 像素以下，但这似乎违背了使用像 Bootstrap ..

有没有办法使用 bootstrap 的列来完成我想要的..

例如
用于桌面的 col-sm-3(4 列) 用于平板电脑的 col-xs-6(2 列) col-???-12 for phone(1 列)

或者如果我遗漏了明显的地方，请澄清

Answer 1

根据他们的 documentation on the Grid Options您应该为手机使用“xs”类，为平板电脑使用“sm”类，为台式机使用“md”类。