twitter-bootstrap-4 - 与列 bootstrap4 等高

Question

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

谢谢

Answer 1

使用此答案的前两个解决方案。第三种解决方案涉及一个 flexbox，但正如您所提到的，您不希望这样。

如果链接不起作用，这是第一个解决方案：（ 谨慎使用）

.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 的等高卡片可用于此目的。当 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）