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>

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

Answer 1

我以前在web应用程序中使用过它，但我没有在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-xsl-6适用于移动设备中的景观。

Answer 3

Bootstrap处理屏幕的宽度和高度，它本身不能检测方向。根据[1]的说法，你仍然可以通过应用一些较大的布局选项(小的，中的)来实现水平方向，并保持较小的垂直方向(我的意思是那些sm和xs等等)。

当然，这一切都取决于您脑海中的设备集:如果设备集有限，则此解决方案可能适用，您可以通过反复试验找到最合适的组合。否则，你需要一些javascript来检测确切的方向，就像@Nono在他的回答中指出的那样。这个解决方案需要一些代码，如果找到正确的组合，我的可以开箱即用。

我的来源：

1