Bootstrap Equal Height Column打破响应

Question

我正在尝试使用container，row和col-sm-4为bootstrap类实现相等的行高。最初，我问了一个被标记为重复的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等高度

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;