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。那么我该怎么做呢？

- Diffy

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/

- jme11

Answer 2

您可以像这样创建自己的类：

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

.col-xsl-6是用于移动设备上的横屏显示。

- Aztrozero

Answer 3

Bootstrap 通过屏幕宽度和高度进行操作，但不能自动检测方向。根据 [1] ，您仍然可以通过应用一些更大的布局选项（如 small、medium）来实现水平方向，并在垂直方向上保持较小的选项（如 sm 和 xs 等）。

当然，这取决于您所考虑的设备集：如果设备集有限，并且您可以通过试错找到最佳组合，则此解决方案可能适用。否则，您需要一些 JavaScript 来检测确切的方向，就像 @Nono 在他的答案中指出的那样。如果找到正确的组合，则我的解决方案可以立即使用，而无需编写代码。

---

我的来源:

[1] 自定义Bootstrap列以适应移动设备的竖屏方向

- mico