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

【问题标题】：Bootstrap 4: Limiting column height to a smaller columnBootstrap 4：将列高限制为较小的列
【发布时间】：2017-04-11 14:58:52
【问题描述】：

我有一个带有 row 类的元素和紧随其后的三个 col 元素。现在，所有col 元素都假定为最大col 的高度。

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

此列#colB 有一个最小高度，但可以做得更大
如果其他两列超过#colB 的高度，则应为overflow-y: scroll。

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

这里是 js-fiddle 示例：

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

【问题讨论】：

看这个：stackoverflow.com/questions/35387368/…

标签： html css twitter-bootstrap bootstrap-4 twitter-bootstrap-4

【解决方案1】：

如果您对预定义的高度没问题，您可以设置行的高度，然后如果它们高于该高度，后续的 div 将溢出。

否则，您将不得不使用 JavaScript 来比较每个 div 的高度，选择最小的一个，然后直接在行元素上设置高度。

.row { height: 50vh; }

【讨论】：

我已经将我的帖子编辑得更清楚一点，但基本上你的意思是没有办法将列限制为特定兄弟的高度？
不能单独使用 CSS。您要么需要预定义的高度，要么需要 javascript 的帮助

【解决方案2】：

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

我已附上 JSFiddle

或

复制此代码并将其粘贴到您的</body>上方

<script>
  temp = $('#colB').height();
  console.log(temp);
  document.getElementById('colA').setAttribute("style","height:"+temp+"px");
  document.getElementById('colC').setAttribute("style","height:"+temp+"px"); 
</script>

【讨论】：