CSS 纵向和横向的 Bootstrap 列视图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22306525/
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 column view in portrait and landscape
提问by meztli
I am failry new to bootsrap and wanted to ask, is there anyway, that when the device screen is in Portrait to always use "md" size columns, and when it is in landscape to always use "xs" columns?
我是 bootsrap 的新手，想问一下，无论如何，当设备屏幕处于纵向时总是使用“md”大小的列，而在横向时总是使用“xs”列？
回答by jtheman
Extend Bootstrap CSS using new or altered media queries. Normally leaving the original bootstrap.css file and extending it with the changes is the best way, or future upgrades will be troublesome. You might only want to recreate the grid classes you want to use, for example:
使用新的或更改的媒体查询扩展 Bootstrap CSS。通常保留原始的 bootstrap.css 文件并通过更改对其进行扩展是最好的方法，否则以后升级会很麻烦。您可能只想重新创建要使用的网格类，例如：
@media (min-width: 992px) and (orientation:landscape) {
.col-md-4 {
// some properties
}
}
@media (min-width: 992px) and (orientation:portrait) {
.col-md-4 {
// redefined
}
}
As mentioned by Skelly, there is no orientation switch built into Bootstrap itself at this time.
正如 Skelly 所提到的，此时 Bootstrap 本身没有内置方向开关。
回答by Leonardo Cabré
Here is my actual solution, maybe helps someone
这是我的实际解决方案，也许可以帮助某人
@media (orientation: portrait){
.portrait{
width: 100%;
}
/*div[class^='col-xs'], div[class*='col-xs']{
width: 100%;
}*/
}
Two solutions:
两种解决方案：
1- is to add "portrait" class to any div that you want to see in portrait with width=100%.
1- 是将“纵向”类添加到您想要在纵向中看到的宽度 = 100% 的任何 div。
2- Uncomment and use the second rule on the media that applies width:100% to any div that have a class name that starts width col-xs
2- 取消注释并使用媒体上的第二条规则，该规则将 width:100% 应用于任何类名以 width col-xs 开头的 div
回答by Zim
As far as I know, there is no way to do this "out of the box".. Bootstrap uses media queries that are based on screen width, not orientation.
据我所知，没有办法做到“开箱即用”.. Bootstrap 使用基于屏幕宽度而不是方向的媒体查询。
