自举中纵向和横向的不同网格布局 [英] Different grid layout for portrait and Landscape in bootstrap

问题描述

我正在使用Sencha制作Android应用程序。
我将这种布局用于移动设备和平板电脑中的响应式布局

I am making an Android app using Sencha. I am using this layout for responsive layout in mobiles and tablets

<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>

现在我还想在从纵向模式切换到横向模式时指定不同的网格布局。例如，在手机屏幕上，我想在纵向模式下使用col-xs-6，在横向模式下使用col-xs-3。那么我该怎么做呢？

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?

推荐答案

我之前用过这个web应用程序，但我没有得到它的工作与科尔多瓦/ PhoneGap，所以你必须用Sencha测试它。

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.

@media screen and (min-aspect-ratio: 13/9){ } // landscape and 
@media screen and (max-aspect-ratio: 13/9){ } // portrait.

不得不挖掘我发现它的位置，但这里是原始来源： -android-browsers /

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/

这篇关于自举中纵向和横向的不同网格布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！