Question

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

我有一行有两个大小相等的列
当设备的宽高比（宽度/高度）大于1（即横向）并且高度小于992px
我希望在所有其他情况下（即肖像或“有足够高度的景观”）堆叠列

在其他“言语”中：

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

如何使用Bootstrap 4执行此操作？

Answer 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/

Bootstrap 4：依赖于宽高比的响应式布局

1 个答案: