如何使用Bootstrap 4网格系统提高响应高度？

Question

我有一个Google map元素，我想使其高度为100％，并根据Bootstrap提供的断点使列（或行）的高度变化。

但是，我想仅通过使用他们的内联类和最少的CSS来实现这一目标（并且不使用媒体查询或任何可能不适合内联的内容）。

我的方法如下：

<div class='row no-gutters'>
    <!-- ... many other cols ... -->

    <div class='col-12 p-3 mt-3 prettyBox'>
        <div class='row no-gutters'>
            <div class='col-0'>
                <div class='d-none d-sm-block py-5'></div>
                <div class='d-none d-sm-block py-5'></div>
                <div class='d-none d-sm-block py-5'></div>
                <div class='d-none d-sm-block py-5'></div>
                <div class='d-none d-sm-block py-5'></div>
            </div>
            <div class='col-12'>
                <h2>Ubicación</h2>
                <div id='map' class='h-100'></div>
            </div>
        </div>
    </div>
</div>

使用min-height: 250px到div <div id="map"></di>。

我无法将空的div堆叠在地图 div内，因为某些东西坏了（我相信Google地图容器必须为空）。

这是一个非常棘手的解决方案，它甚至导致一些溢出，即使使用clearfix也无法摆脱，但这是我对Bootstrap的了解不足的唯一方法。

任何想法都知道如何使用Bootstrap 4正确执行这种响应高度的事情？