纵向和景观的不同的网格布局在bootstrap

Question

我正在使用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>

现在我还想在从纵向模式切换到横向模式时指定不同的网格布局.例如,在移动屏幕中,我想在纵向模式下使用col-xs-6,在横向模式下使用col-xs-3.那我该怎么做？

Answer 1

我之前使用过这个用于网络应用程序,但我没有使用Cordova/PhoneGap,所以你必须用Sencha进行测试.

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

只好掏了出来,我发现它,但这里是原始来源:http://abouthalf.com/development/orientation-media-query-challenges-in-android-browsers/

Answer 2

您可以像这样上课：

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .col-xsl-6{ width: 50%; }
}

.col-xs l -6用于移动环境。