css - 如何将 Bootstrap 列限制为特定列的高度？

Question

让bootstrap的column等高已经在这里回答了:

How can I make Bootstrap columns all the same height?

但是我有一些不同的要求。

具体来说，我需要将列的高度限制为特定列的高度。

例如，如果我们分别有 2 列 (100px, 50px)，我希望我的第一列的高度也为 50px，我将using (overflow:hidden) in。(注意高度是动态的，但我总是想使用第一列的高度)

纯 css 可以吗？还是我必须使用 javascript 才能完成此操作？

Answer 1

当然，为什么不使用像这样的特殊 CSS 类来限制高度..

.row.limit [class*="col-"]{
  max-height:50px;
  overflow:hidden;
}

http://bootply.com/3LIJcG0SBe

如果您不需要将该类应用于所有 Bootstrap 列(col-*)，最好应用特定的CSS 选择器。然后将 limit 添加到适当的列...

.limit {
  max-height:50px;
  overflow:hidden;
}