iphone和ipad的bootstrap列是一样的,如何获得另一个大小

Question

我一直在开发一个bootstrap网站,我发现了一个非常重要的缺陷,它将平板电脑尺寸与手机尺寸相同,col-xs-x(适用于768px及以下)适用于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用于手机(1列)

或者请澄清我是否错过了显而易见的事实

Answer 1

根据他们关于网格选项的文档,您应该使用手机的'xs'类,平板电脑的'sm'和桌面的'md'类.

Answer 2

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

/* 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;}  


 }