Bootstrap 3 cols одинаковой высоты (только CSS) - PullRequest
Новая
       9

Bootstrap 3 cols одинаковой высоты (только CSS)

0 голосов
/ 07 декабря 2018

У меня есть список продуктов на веб-сайте prestashop с использованием Bootstrap 3. Все продукты имеют названия и описания различной длины.

Проблема в том, что если они не одинакового размера, существует смещение.

Как я могу установить одинаковую высоту для каждой строки из .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>

Спасибо

Ответы [ 2 ]

0 голосов
/ 07 декабря 2018

Пожалуйста, добавьте ниже 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;
}
0 голосов
/ 07 декабря 2018

Используйте этот CSS 

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

В Bootstrap 4 вы можете просто добавить классы d-flex flex-wrap, но в Bootstrap 3 это пока недоступно

...