03/19/2019

**Bootstrap 4等高解决方案**

Bootstrap实用工具/flex为相等的高度

活生生的例子在Codepen

由父div固定高度或最小高度的引导类等高

<div class="d-flex align-content-stretch flex-wrap" style="min-height: 200px">
    <div>Flex height test text for example , Flex height test text for example </div>
    <div>Flex item</div>
    <div>Flex item</div>
    <div>Flex item</div>
 </div>

.bd-highlight { background-color: rgba(86,61,124,.15); border: 1px solid rgba(86,61,124,.15); } .fixed-height-200 { min-height: 200px; } <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <br><br><br> <div class="d-flex align-content-stretch flex-wrap fixed-height-200"> <div class="p-2 bd-highlight">Flex item <br> 1111111111</div> <div class="p-2 bd-highlight bg-danger">Flex item</div> <div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight bg-info">Flex item</div> <div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight bg-light">Flex item <br> 1111111111</div> <div class="p-2 bd-highlight">Flex item <br> 1111111111</div> <div class="p-2 bd-highlight">Flex item <br> 1111111111</div> <div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight bg-primary">Flex item</div> <div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight">Flex item</div> </div>

更新2021

引导 4 + 5

Flexbox现在在Bootstrap 4(和Bootstrap 5)中默认使用，因此不需要额外的CSS来创建等高列:https://www.codeply.com/go/IJYRI4LPwU

例子:

<div class="container">
    <div class="row">
        <div class="col-md-6"></div>
        <div class="col-md-6"></div>
    </div>
</div>

引导3

引导3的最佳方法。x -使用CSS flexbox(需要最小的CSS)…

.equal {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
}

Bootstrap相同高度flexbox的例子

若要仅在特定断点(响应式)应用相同高度的flexbox，请使用媒体查询。例如，这里是sm (768px)及以上:

@media (min-width: 768px) {
  .row.equal {
    display: flex;
    flex-wrap: wrap;
  }
}

此解决方案也适用于多行(列换行):https://www.codeply.com/go/bp/gCEXzPMehZ

其他解决方法

其他人会推荐这些选项，但对于响应式设计来说并不是一个好主意。这些只适用于简单的单行布局，没有列换行。

使用巨大的负边距和填充 使用display:table-cell(此解决方案也会影响响应网格，因此可以使用@media查询仅在列垂直堆叠之前在更宽的屏幕上应用表显示)

03/19/2019

**Bootstrap 4等高解决方案**

Bootstrap实用工具/flex为相等的高度

活生生的例子在Codepen

由父div固定高度或最小高度的引导类等高

<div class="d-flex align-content-stretch flex-wrap" style="min-height: 200px">
    <div>Flex height test text for example , Flex height test text for example </div>
    <div>Flex item</div>
    <div>Flex item</div>
    <div>Flex item</div>
 </div>

.bd-highlight { background-color: rgba(86,61,124,.15); border: 1px solid rgba(86,61,124,.15); } .fixed-height-200 { min-height: 200px; } <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <br><br><br> <div class="d-flex align-content-stretch flex-wrap fixed-height-200"> <div class="p-2 bd-highlight">Flex item <br> 1111111111</div> <div class="p-2 bd-highlight bg-danger">Flex item</div> <div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight bg-info">Flex item</div> <div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight bg-light">Flex item <br> 1111111111</div> <div class="p-2 bd-highlight">Flex item <br> 1111111111</div> <div class="p-2 bd-highlight">Flex item <br> 1111111111</div> <div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight bg-primary">Flex item</div> <div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight">Flex item</div> </div>

这里有很多CSS…

jQuery

$(document).ready(function() {

   // Get height of original column you want to match
   var box-height = $('.panel:nth-child(1)').outerHeight();

   // Output same height on particular element or element(s)
   $('.panel').height(box-height);

});

非常简单的代码，不需要玩css，尽管上面所有的选项都是完全可用的。

杰斯菲德尔

您可以使用下面的代码

var heights = $(".row > div").map(function() {
    return $(this).height();
}).get(),
maxHeight = Math.max.apply(null, heights);
$(".row > div").height(maxHeight);

我知道我来晚了，但是现在您可以使用“min-height”样式属性来达到您的目的。