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适用于移动设备中的横向广告。

Answer 3

Bootstrap以屏幕宽度和高度播放，无法检测方向本身。根据{{3}}，你仍然可以通过对水平方向应用一些较大的布局选项（小，中）并使较小的布局保持垂直（我的意思是那些sm和xs等）来实现某些目的。

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

我的来源：

[1] [1]

Answer 4

我认为这很容易实现。你必须听＆＃34; onRotationChange＆＃34;事件，然后修改您的div的类。

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

4 个答案: