Bootstrap 等高列破坏了响应性

Question

我正在尝试使用容器、行和 col-sm-4 为引导类实现相等的行高。最初，我问了一个Question，它被标记为重复。但是，我发现提供的解决方案存在问题。

问题是，在正常的三个 col-sm-4 的情况下，我在大屏幕上得到 3 行，而当我到达“断点”时正好是一行。但是，提供的解决方案 (JSFiddle) 违反了该规则。根据屏幕大小，有时我会根据屏幕大小得到 1、2、3 甚至 4 列，如下图所示。

如何在保持引导程序的标准行为的同时实现相同的高度？

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      Row 1 Col 1
    </div>
    <div class="col-sm-4">
      This is some long tex that has a greater height than the rest
    </div>
    <div class="col-sm-4">
      Row 1 Col 3
    </div>
    <div class="col-sm-4">
      Row 2 Col 1
    </div>
    <div class="col-sm-4">
      Row 2 Col 2
    </div>
    <div class="col-sm-4">
      Row 3 Col 3
    </div>`
  </div>
</div>

// css
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
  margin: 10px;
}
.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  flex-wrap: wrap;
}
.row > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

Answer 1

这仍然是How can I make Bootstrap columns all the same height?的副本

https://jsfiddle.net/44mnaqxf/

如果您通读答案，则需要媒体查询以响应式应用“等高”。

@media (min-width: 768px) {
  .row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-wrap: wrap;
  }
}

Answer 2

使用 Jquery 等高

var biggesthei = 0;

$(".col-sm-4").each(function() {

  if ($(this).height() > biggesthei) {
    biggesthei = $(this).height()
  }

  if ($(window).width() < 320) {
    $(this).height() = biggesthei

  }

  $(".col-sm-4").css("min-height", biggesthei);
});

.col-sm-4 {
  width: 30%;
  float: left;
  margin-left: 1%;
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-4">
  Row 1 Col 1
</div>
<div class="col-sm-4">
  Row 1 Col 1 Row 1 Col 1
    Row 1 Col 1 Row 1 Col 1
      Row 1 Col 1 Row 1 Col 1
        Row 1 Col 1 Row 1 Col 1
</div>
<div class="col-sm-4">
  Row 1 Col 1
</div>