Question

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

谢谢

Answer 1

使用this回答的前两个解决方案。第三个解决方案涉及一个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的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相等的高度

3 个答案: