html - Bootstrap 3 列相同高度(仅 CSS)

Question

我在使用 Bootstrap 3 的 prestashop 网站上有一个产品列表。 所有产品都有不同长度的名称和描述。

问题是如果它们的大小不同，就会有一个偏移量。

---

如何为 .row 中的每一行设置相同的高度？

我想对齐所有边框底部

链接到 my Fiddle

*不要考虑 JavaScript，它只是用来生成 HTML。

function gen() {
  var text = "";
  var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

  for(var i = 0; i < 15; i++)
    text += possible.charAt(Math.floor(Math.random() * possible.length));

  return text;
}

for(var i=0;i<=20;i++){
  var e = $(".ajax_block_product").first().clone();
  e.find(".title").text(gen()+" "+gen()+" "+gen());
  $(".row").append(e);
}

img{width:50%;}

.ajax_block_product {
    border-bottom: 1px solid #f00;
    position: relative;
    padding: 20px;
    text-align: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="row">
  <div class="ajax_block_product col-xs-12 col-sm-6 col-md-4">
    <img src="http://bioritmefestival.org/wp-content/uploads/2017/11/img-test.png">
    <div class="title">Item name</div>
  </div>
</div>

谢谢

Answer 1

请在您的 CSS 文件中添加以下 CSS 代码:

.row {
 display: -webkit-flex;
 display: -moz-flex;
 display: -ms-flex;
 display: flex;
 flex-wrap: -webkit-wrap;
 flex-wrap: -moz-wrap;
 flex-wrap: -ms-wrap;
 flex-wrap: wrap;
}