与列 bootstrap4 等高

Question

我正在使用 bootstrap 4 并想知道如何让所有列保持相同的高度？如果可能，不使用 flexbox 以与旧浏览器兼容（呸！）。

谢谢

Answer 1

使用this答案的前两个解决方案。第三种解决方案涉及 flexbox，但正如您所提到的，您不想要它。

万一 link 不起作用，这里是 第一个解决方案 ： (慎用)

.row {
    overflow:hidden;
}
[class*="col-"]{
    margin-bottom:-99999px;
    padding-botton:99999px;
}

解决方案 2：（表格）

.row {
   display:table;
}
[class*="col-"] {
    float:none;
    display:table-cell;
    vertical-align:top;
}

Answer 2

您希望列的内容等高吗？ Bootstrap 4 的 equal height cards 可以用于此。 ~~这在未启用 flexbox 时使用 display:table 和 display:table-cell~~。

更新

现在 Bootstrap 4 (alpha 6) 默认为 flexbox，列始终等高：http://www.codeply.com/go/m20UAOFw79

Answer 3

如果你想使用 flexbox

，你可以这样做
CSS

.row.is-flex { display: flex; flex-wrap: wrap; } .row.is-flex > [class*='col-'] { display: flex; flex-direction: column; } /* * And with max cross-browser enabled. * Nobody should ever write this by hand. * Use a preprocesser with autoprefixing. */ .row.is-flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .row.is-flex > [class*='col-'] { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; }

html

<div class="row is-flex"> <div class="col-sm-4">...</div> <div class="col-sm-4">...</div> <div class="col-sm-4">...</div> </div>

来源 (https://scotch.io/bar-talk/different-tricks-on-how-to-make-bootstrap-columns-all-the-same-height)

与列 bootstrap4 等高

equal height to columns bootstrap4

twitter-bootstrap-4