Bootstrap 4：依赖于纵横比的响应式布局

【问题标题】：Bootstrap 4: Responsive layouts that depend on aspect ratiosBootstrap 4：依赖于纵横比的响应式布局
【发布时间】：2018-06-19 16:22:46
【问题描述】：

我正在努力在 Bootstrap 4 中实现以下响应式布局：

我有一排有两个大小相等的列
当设备的纵横比（宽度/高度）大于 1（即横向）且高度小于 992 像素时，我希望列并排
我希望在所有其他情况下将列堆叠（即纵向或“具有足够高度的横向”）

换句话说：

if w/h > 1 and h < 992:
    # side by side
else
    # stacked

如何使用 Bootstrap 4 做到这一点？

【问题讨论】：

标签： css responsive-design bootstrap-4

【解决方案1】：

向列添加另一个类，然后根据窗口高度更改宽度，使用 jQuery 可能最简单

<div class="col-md-6 special-class">something</div>
<div class="col-md-6 special-class">something else</div>

<script>
$(window).resize(function() {
  checkSize()
})
$(document).ready(function() {
  checkSize()
})

function checkSize() {
  var aspect = $(window).width() / $(window).height()
  if($(window).height() < 992  && aspect > 1) {
    $('.special-class').css({'flex': '0 0 50%', 'max-width': '50%'})
  } else {
    $('.special-class').css({'flex': '0 0 100%', 'max-width': '100%'})
  }
}
</script>

这里的缺点是调整大小事件很昂贵，请检查使用下划线或 lodash 对其进行限制。

基本小提琴，不做方面位：http://jsfiddle.net/aq9Laaew/42225/

【讨论】：