Bootstrap 4 移动与桌面中的列高

【问题标题】：Bootstrap 4 Column height in mobile vs desktopBootstrap 4 移动与桌面中的列高
【发布时间】：2019-11-03 20:32:02
【问题描述】：

我有两列大小为6 的桌面。

在移动设备中，我需要这些列来适应手机的高度，即

我们如何根据设备使用 Bootstrap 4 来改变高度？

我用的是，

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

如何让h-100 因设备而异，例如h-sm-50 和h-xl-100？

【问题讨论】：

【解决方案1】：

没有高度等级因设备而异

唯一可用的东西是根据视口而变化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}
}

【讨论】：