Css iphone和ipad的引导列是一样的，如何获得另一个大小

我一直在开发一个bootstrap网站，我发现了一个非常重要的缺陷，它将平板电脑大小视为手机大小，col-xs-x（用于768px及以下）同样适用于iphone和ipad

在我的设计中，桌面和平板电脑的尺寸用了两列，手机尺寸用了一列，我希望是一列，但bootstrap无法做到这一点

我知道我可以创建完全相同内容的两个副本，并使用媒体查询（例如display:none、display:block）将它们交换到480像素以下，但这似乎违背了使用引导之类的东西的全部意义

是否有任何方法可以使用bootstrap的列来实现我想要的

e、 g.
col-sm-3用于桌面（4列） 片剂用col-xs-6（2列） 用于电话的列-？？-12（1列）

---

或者请澄清，根据他们的观点，如果我遗漏了明显的

，你应该在手机上使用“xs”类，在平板电脑上使用“sm”，在桌面上使用“md”类。

解决方案是添加更多的媒体查询和额外的样式

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px){

.callout-wrap, .vertical_photo {
    margin-top:10px;}   

.banner-left, .banner-right, .content-left-side, .content-right-side{
width:100%;

}

.border_drop_bg {
margin-top:10px;
width:100%;}

.vertical_photo {
display:none;}  


 }

---

不太明白为什么会有问题。但根据下面的指南

中型是iPad Landsacape。 小的是iPad肖像。 超小的是手机用的

---

可能会这样说，但如果你下载的话，xs是768及以下版本的。刚刚遇到这个问题。看起来像是引导程序上的一个bug。似乎col xs-*是在网格css中的媒体查询之外定义的，而根据他们的文档，网格css不应该这样定义。这并不是一个“缺陷”。平板电脑和手机之间的区别是模糊的，因为有些手机的分辨率比有些平板电脑高，而且像素密度比更加复杂。除非你是在为一个非常具体的设备列表编码，否则最好是让行业标准来决定这一天。也就是说，由用户3361996删除的答案是一个更好的方法。这也是一个比您的一组非常具体的CSS语句更有益于社区的答案。@isherwood-删除的答案是什么？（我没有足够的代表来查看其他人删除的帖子。）“如果您下载了引导CSS文件（不使用CDN），您只需将.col-sm媒体查询的最小宽度从768px更改为480px。然后使用col-sm-6类将用于480px及以上。col-xs-12将为您提供低于480px的单列。”