Bootstrap 4：将列高限制为较小的列

Question

我有一个元素row，后面有三个col元素。现在，所有col元素都假设最大col的高度。

我想将列高限制为较小列的高度，

• 此列#colB具有最小高度，但可以更大
• 如果其他两列超出overflow-y: scroll的高度，则应#colB。

有没有一种使用Bootstrap 4实用程序的好方法？

示例js-fiddle here：

https://jsfiddle.net/fwtpeq43/4/

Answer 1

如果你有一个预定义的高度，你可以设置行的高度，然后如果它们高于那个高度，后续的div将会溢出。

否则，你必须使用JavaScript来比较每个div的高度，选择最小的div，然后直接在row元素上设置高度。

.row { height: 50vh; }

Answer 2

您可以在页面加载时使用javascript或jQuery来获取 colB 高度和更新 colA 和< strong> colC 基于此的高度。

我已经附上了      http://aehlke.github.io/tag-it/

或

将此代码复制并粘贴到<script> temp = $('#colB').height(); console.log(temp); document.getElementById('colA').setAttribute("style","height:"+temp+"px"); document.getElementById('colC').setAttribute("style","height:"+temp+"px"); </script>

上方

dtValidFrom.Value = DateTime.Now.AddYears(-2).AddMonths(-2)