如何获得flexbox行为与bootstrap列结合使用

Question

问题：我无法让Bootstrap的响应列具有相同的高度。

解决方案： Stack Overflow的we-code-while-wait-service服务将提供它。 ;）

设定：

我的问题是我正在使用像

这样的bootstraps响应列

<div class="row">
    <div class="col-xxs-12 col-xs-6 col-sm-4 col-md-5ths col-lg-5ths">
         ...
    </div>
    <div class="col-xxs-12 col-xs-6 col-sm-4 col-md-5ths col-lg-5ths">
         ...
    </div>
    <div class="col-xxs-12 col-xs-6 col-sm-4 col-md-5ths col-lg-5ths">
         ...
    </div>
    <div class="col-xxs-12 col-xs-6 col-sm-4 col-md-5ths col-lg-5ths">
         ...
    </div>
    <div class="col-xxs-12 col-xs-6 col-sm-4 col-md-5ths col-lg-5ths">
         ...
    </div>
</div>

这样它们将在不同的屏幕尺寸上占据不同的基于百分比的宽度，例如你在下面看到的区别

你可以看到我在第二张图片中详述了我遇到的常见问题。修复是强制所有响应列具有相同的高度。

我知道如何使用flexbox使兄弟姐妹div在同一行中具有相同的高度，但在应用于Boostrap列时，这会搞砸。

在将flex:1应用于Bootstrap响应列并将display:flex应用于其父级后，屏幕收缩时会发生什么情况的图片

是否有不使用JavaScript的解决方案？

Answer 1

请参阅此小提琴https://jsfiddle.net/fo5o8n8y/1/

只需将一个类添加到您希望大小相同的列中，并将此css添加到它们中：

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}