Question

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

问题是，如果它们的大小不同，则会出现偏移。

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

我想对齐所有边框底部

**不考虑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

.row {
  display: flex;
  flex-wrap: wrap;
}

在Bootstrap 4中，您可以仅添加类d-flex flex-wrap，但在Bootstrap 3中尚不可用

Answer 2

请在您的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;
}

Bootstrap 3 cols高度相同（仅CSS）

2 个答案: