与列相等的高度bootstrap4

-1

我使用引导程序4并想知道我如何离开同一高度的所有列？如果可能的话，不要使用flexbox与旧浏览器兼容（bah！）。与列相等的高度bootstrap4

谢谢

2016-07-04 Angelo Merlo

-2

这里是你做了什么，如果你想使用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）

来源

2017-01-21 19:19:11 Ayrad

Bootstrap 4现在默认为flexbox，所以这些额外的CSS是不必要的。 http://www.codeply.com/go/m20UAOFw79 – ZimSystem

使用this答案的前两个解决方案。第三种解决方案涉及Flexbox，但正如你所提到的，你不需要这个。

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

.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; 
}

来源

2016-07-04 13:38:08

正如在其他答复中提到，这些解决方案真的不工作，因为他们打破柱包装和响应能力。 http://codeply.com/go/tPLjH5r6dJ – ZimSystem

你应该知道，如果一个解决方案建议你在你的样式中加上'-99999px'，那么这显然是一个完全的破解解决方案，应该谨慎使用。 –

@EdmundReed感谢您的评论...即使它大约一年之后... –

你想要的内容的c列是相等的高度？引导4的equal height cards可用于此。 ~~当flexbox未启用时，它使用 display:table和 display:table-cell~~ 。

UPDATE

现在引导4（阿尔法6）是Flexbox的默认情况下，列一直是相等的高度：http://www.codeply.com/go/m20UAOFw79

来源

2016-07-05 15:12:24 ZimSystem

这不是OP的问题。他想要的是实际栏高度。等高卡不是解决方案。 –

我提供了另一种选择，因为表格单元格和负边距方法有许多不利影响。 – ZimSystem

与列相等的高度bootstrap4

回答

相关问题