javascript - 如果设备正在旋转，则更改 Bootstrap 类

Question

是否可以检测设备是水平旋转还是垂直旋转并相应地更改 Bootstrap 类？

这是设备垂直旋转时的样子:

一切看起来都很好，使用了 Bootstrap 类 col-xs-12。

但是如果用户水平旋转设备，就会有很多空白:

在这种情况下，我想使用此空格并将 col-xs-12 更改为 col-xs-6，以便并排显示 2 个容器。

这可以通过 bootstrap 实现吗，还是我必须使用 javascript？

Answer 1

你不应该改变类，你应该根据方向修改选择的类。

/* portrait */
@media screen and (orientation:portrait) {
  /* portrait-specific styles */
  .classYouWantToChange { 
     background: blue;
  }
}
/* landscape */
@media screen and (orientation:landscape) {
   /* landscape-specific styles */
  .classYouWantToChange { 
     background: black;
  }
}

正如您在上面的代码中看到的，我们正在根据设备方向覆盖类 classYouWantToChange