Bootstrap 4：将列高限制为较小的列
Bootstrap 4: Limiting column height to a smaller column
我有一个带有 class row 的元素，紧接着是三个 col 元素。现在，所有 col 元素都采用最大 col.
的高度
我想将列高限制为较小的列，这样，
- 此栏
#colB 有最小高度，但可以调大
- 其他两列如果超过
#colB 的高度，则应 overflow-y: scroll。
有没有使用 Bootstrap 4 个实用程序的好方法？
示例 js-fiddle 此处：
如果您接受预定义的高度，您可以设置行的高度，然后如果后续的 div 高于该高度，它们将溢出。
否则就得用JavaScript比较每个div的高度，select最小的，然后直接在行元素上设置高度。
.row { height: 50vh; }
您可以在页面加载时使用 javascript 或 jQuery 来获取 colB 高度和更新 colA and colC height based on that.
我已附上
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>
我有一个带有 class row 的元素，紧接着是三个 col 元素。现在，所有 col 元素都采用最大 col.
我想将列高限制为较小的列，这样，
- 此栏
#colB有最小高度，但可以调大 - 其他两列如果超过
#colB的高度，则应overflow-y: scroll。
有没有使用 Bootstrap 4 个实用程序的好方法？
示例 js-fiddle 此处：
如果您接受预定义的高度，您可以设置行的高度，然后如果后续的 div 高于该高度，它们将溢出。
否则就得用JavaScript比较每个div的高度，select最小的，然后直接在行元素上设置高度。
.row { height: 50vh; }
您可以在页面加载时使用 javascript 或 jQuery 来获取 colB 高度和更新 colA and colC height based on that.
我已附上 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>