CSS iphone 和 ipad 的 bootstrap 列是一样的，如何获得不同的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32149937/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap columns for iphone and ipad are the same, how to get another size
提问by Justin Blayney
I have been developing a bootstrap website and I have found 1 very major flaw, it treats tablet size the same as phone size, the col-xs-x (for 768px and under) applies to iphone and ipad alike.
我一直在开发一个引导程序网站，我发现了一个非常大的缺陷，它将平板电脑的大小与手机的大小相同，col-xs-x（768px 及以下）同样适用于 iphone 和 ipad。
http://www.think.darkstarmedia.net/
http://www.think.darkstarmedia.net/
With my design I use 2 columns for desktop and tablet size, once in the phone size I want it to be 1 column but bootstrap has no way to do that
在我的设计中，我将 2 列用于台式机和平板电脑的大小，一旦在手机大小中，我希望它是 1 列，但引导程序无法做到这一点
I know I could create 2 copies of the exact same content and use media queries (e.g. display:none, display:block) and swap them out for under 480 pixels, but that seems like it goes against the whole point of using something like bootstrap..
我知道我可以创建 2 个完全相同内容的副本并使用媒体查询（例如 display:none、display:block）并将它们交换为 480 像素以下，但这似乎与使用 bootstrap 之类的东西背道而驰..
Is there anyway to use bootstrap's columns to accomplish what I want..
无论如何使用引导程序的列来完成我想要的..
e.g.
col-sm-3 for desktop (4 columns)
col-xs-6 for tablets (2 columns)
col-???-12 for phone (1 columns)
例如，
col-sm-3 用于台式机（4 列） col-xs-6 用于平板电脑（2 列） col-???-12 用于手机（1 列）
Or please clarify if I am missing the obvious
或者请澄清我是否遗漏了明显的
采纳答案by Justin Blayney
The solution was to add more media queries and extra styles
解决方案是添加更多媒体查询和额外样式
/* 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;}
}
回答by BSMP
According to their documentation on the Grid Optionsyou should be using the 'xs' classes for phones, 'sm' for tablets, and 'md' classes for desktop.
根据他们关于 Grid Options的文档，您应该将 'xs' 类用于手机，'sm' 用于平板电脑，'md' 类用于台式机。
回答by Jason Ching
Not quite understand why there is a problem. But according to below guide,
不太明白为什么会出现问题。但根据以下指南，
Medium is for iPad Landsacape. Small is for iPad Portrait. Extra Small is for phones.
中型适用于 iPad 景观。Small 适用于 iPad Portrait。Extra Small 适用于手机。
http://mspangenberg.github.io/Bootstrap-3-Grids/devices.html
http://mspangenberg.github.io/Bootstrap-3-Grids/devices.html
