twitter-bootstrap 引导程序中纵向和横向的不同网格布局
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23459824/
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
Different grid layout for portrait and Landscape in bootstrap
提问by Diffy
I am making an Android app using Sencha. I am using this layout for responsive layout in mobiles and tablets
我正在使用 Sencha 制作一个 Android 应用程序。我将此布局用于手机和平板电脑中的响应式布局
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-4</div>
</div>
Now i also want to specify a different grid layout when i switch from portrait to landscape mode .For example,in mobile screen, i want to use col-xs-6 in portrait mode and col-xs-3 in landscape mode. So how do i do that?
现在我还想在从纵向模式切换到横向模式时指定不同的网格布局。例如，在移动屏幕中，我想在纵向模式下使用 col-xs-6，在横向模式下使用 col-xs-3。那我该怎么做呢？
回答by jme11
I've used this before for web apps, but I didn't get it working with Cordova/PhoneGap, so you'll have to test it with Sencha.
我以前在网络应用程序中使用过它，但我没有让它与 Cordova/PhoneGap 一起工作，所以你必须用 Sencha 测试它。
@media screen and (min-aspect-ratio: 13/9){ } // landscape and
@media screen and (max-aspect-ratio: 13/9){ } // portrait.
Had to dig out where I found it, but here is the original source: http://abouthalf.com/development/orientation-media-query-challenges-in-android-browsers/
不得不挖掘我发现它的地方，但这是原始来源：http: //abouthalf.com/development/orientation-media-query-challenges-in-android-browsers/
回答by Aztrozero
You can do your own class like this:
你可以像这样做你自己的课程：
@media only screen and (min-width: 480px) and (max-width: 767px) {
.col-xsl-6{ width: 50%; }
}
.col-xsl-6 is for landscape in mobile.
.col-xs l-6 用于移动设备中的横向。
回答by mico
Bootstrap plays with screen widths and heights and it cannot detect the orientation itself. According to [1]you could still achieve something by applying some of the larger layout options (small, medium) for the horizontal orientation and keep the smaller ones on vertical (I mean those sm and xs and so on).
Bootstrap 使用屏幕宽度和高度，它无法检测方向本身。根据[1]，您仍然可以通过为水平方向应用一些较大的布局选项（小、中）并保持较小的垂直方向（我的意思是那些 sm 和 xs 等）来实现一些目标。
Of course all depends on the set of devices in your mind: this solution may apply if the set of devices is limited and you can by trial and error find the best fit combination. Otherwise you need some javascript to detect the exact orientation, like @Nono pointed out in his answer. That solution needs some code, mine could work out of box, if right combination is found.
当然，一切都取决于您心目中的设备组：如果设备组有限并且您可以通过反复试验找到最合适的组合，则此解决方案可能适用。否则你需要一些javascript来检测确切的方向，就像@Nono在他的回答中指出的那样。该解决方案需要一些代码，如果找到正确的组合，我的可以开箱即用。
My source:
我的来源：
[1] customizing bootstrap columns in portrait orientation for mobile devices
回答by Nono
I don't think this is easily possible. You would have to listen the "onRotationChange" event and then modify the classes of your divs.
我不认为这很容易实现。您将不得不收听“onRotationChange”事件，然后修改您的 div 的类。
