移动与桌面中的引导4列高度

没有高度等级随设备而变化

唯一可用的是根据视窗的不同而变化 bootstrap Sizing

因此,您可以使用自定义类仅在使用 css media queries

例子

HTML格式

<div class="row h-100">
    <div class="col-xl-6 mobile-100"></div>
    <div class="col-xl-6 mobile-100"></div>
</div>

自定义CSS

@media only screen and (max-width: 600px) {
  .mobile-100 {height:100vh}
}

使用Bootstrap的 flex-grow-1 上课。这样在桌面或移动设备上宽度和高度相等。

<div class="row min-vh-100">
      <div class="col-xl-6 d-flex flex-grow-1">
      </div>
      <div class="col-xl-6 d-flex flex-grow-1">
      </div>
</div>

https://www.codeply.com/p/05LpUi7VUa

编辑: 使整个布局 最大100%高度 ,可以使用绑定到引导的媒体查询 xl 1200像素的断点。

@media (max-width: 1200px) {
    .flex-fill-50 {
        height:50vh
    }
}