html - Bootstrap 4 : Limiting column height to a smaller column

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

我有一个带有 row 类的元素和紧随其后的三个 col 元素。现在,所有 col 元素都采用最大 col 的高度。

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

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

是否有使用 Bootstrap 4 实用程序执行此操作的好方法?

示例 js-fiddle 在这里:

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

最佳答案

如果您接受预定义的高度,您可以设置行的高度,然后如果后续的 div 高于该高度,它们将溢出。

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

.row { height: 50vh; }

关于html - Bootstrap 4 : Limiting column height to a smaller column,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43335555/

相关文章:

jquery - 单击 SVG 以显示图像 slider

css - 如何覆盖 bootstrap img 的高度和宽度属性?

javascript - 在 .sticky-top 元素中调用时,弹出窗口会滚动并且某些内容会隐藏

javascript - 在我的自定义指令中动态添加 bootstrap.ui 工具提示

jquery - 如何保留子 div 相对于其容器的偏移量

javascript - 通过 javascript 将随机 rgb 背景颜色分配给 HTML 正文

php - 使用 PHP 和 CURL 创建新的 etherpad

html - 溢出:自动滚动条和动态宽度

html - 设置任意嵌套列表的样式

html - 表格列宽等于内容宽度