Bootstrap 3 Галерея динамических изображений с расширяющимися тайлами

Question

У меня есть следующее изображение, представленное здесь как картинка

И HTML-код, который рисует это.

<div id="Gallery1" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 gallery-outer">
    <div class="product-tile-inner">...</div>
</div>
<div id="Gallery2" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 gallery-outer">
    <div class="product-tile-inner">...</div>
</div>
<div id="Gallery3" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 gallery-outer">
    <div class="product-tile-inner">...</div>
</div>
<div id="Gallery4" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 gallery-outer">
    <div class="product-tile-inner">...</div>
</div>
<div id="Gallery5" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 gallery-outer">
    <div class="product-tile-inner">...</div>
</div>
<div id="Gallery6" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 gallery-outer">
    <div class="product-tile-inner">...</div>
</div>
<div id="Gallery7" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 gallery-outer">
    <div class="product-tile-inner">...</div>
</div>
<div id="Gallery8" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 gallery-outer">
    <div class="product-tile-inner">...</div>
</div>

У меня есть маленькая кнопка внутри каждого элемента, чтобы он расширялся и отображал больше деталей, но всякий раз, когда я нажимаю на любую из кнопок, происходит следующее.

Кроме того, это CSS, используемый для имени класса gallery-outer.

display: inline-block;
zoom: 1;
text-align: center;
vertical-align: top;

И это gallery-inner имя класса

top: 0;
left: 0;
bottom: 0;
right: 0;
min-height: 430px;

Есть идеи об обходном пути для этого? Извините, у меня нет CodePen, я адаптировал код для защиты реального.

Answer 1

Создайте сетку с элементами, которые всегда будут иметь одинаковую высоту в строке .Это можно сделать с помощью Bootstrap 3 и чуть более настраиваемого CSS:

$('.btn-block').on('click', function() {
  var $block = $(this).closest(".product-tile-inner");
  $block.height("+=30");
});

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

.grid>[class*='col-'] {
  display: flex;
  flex-direction: column;
  margin-bottom: 25px;
}

.product-tile-inner {
  position: relative;
}

.product-tile-inner img {
  width: 100%;
  height: auto;
}

.product-tile-inner .btn {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 0;
  opacity: .85;
}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">
  <div class="grid">
    <div class="col-xs-12 col-sm-4 col-md-3">
      <div class="product-tile-inner">
        <img src="https://picsum.photos/600/600/?gravity=west">
        <div class="btn btn-block btn-sm btn-primary">More</div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-3">
      <div class="product-tile-inner">
        <img src="https://picsum.photos/600/600/?gravity=west">
        <div class="btn btn-block btn-sm btn-primary">More</div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-3">
      <div class="product-tile-inner">
        <img src="https://picsum.photos/600/600/?gravity=west">
        <div class="btn btn-block btn-sm btn-primary">More</div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-3">
      <div class="product-tile-inner">
        <img src="https://picsum.photos/600/600/?gravity=west">
        <div class="btn btn-block btn-sm btn-primary">More</div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-3">
      <div class="product-tile-inner">
        <img src="https://picsum.photos/600/600/?gravity=west">
        <div class="btn btn-block btn-sm btn-primary">More</div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-3">
      <div class="product-tile-inner">
        <img src="https://picsum.photos/600/600/?gravity=west">
        <div class="btn btn-block btn-sm btn-primary">More</div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-3">
      <div class="product-tile-inner">
        <img src="https://picsum.photos/600/600/?gravity=west">
        <div class="btn btn-block btn-sm btn-primary">More</div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-3">
      <div class="product-tile-inner">
        <img src="https://picsum.photos/600/600/?gravity=west">
        <div class="btn btn-block btn-sm btn-primary">More</div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-3">
      <div class="product-tile-inner">
        <img src="https://picsum.photos/600/600/?gravity=west">
        <div class="btn btn-block btn-sm btn-primary">More</div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-3">
      <div class="product-tile-inner">
        <img src="https://picsum.photos/600/600/?gravity=west">
        <div class="btn btn-block btn-sm btn-primary">More</div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-3">
      <div class="product-tile-inner">
        <img src="https://picsum.photos/600/600/?gravity=west">
        <div class="btn btn-block btn-sm btn-primary">More</div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-3">
      <div class="product-tile-inner">
        <img src="https://picsum.photos/600/600/?gravity=west">
        <div class="btn btn-block btn-sm btn-primary">More</div>
      </div>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Answer 2

Вы можете использовать Bootstrap 4 с flexbox , чтобы создать сетку из элементов, которые всегда будут иметь равную высоту в строке :

$('.btn-block').on('click', function() {
  var $block = $(this).closest(".product-tile-inner");
  $block.height("+=30");
});

.grid>[class*='col-'] {
  display: flex;
  flex-direction: column;
  margin-bottom: 25px;
}

.product-tile-inner {
  position: relative;
}

.product-tile-inner img {
  width: 100%;
  height: auto;
}

.product-tile-inner .btn {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 0;
  opacity: .85;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="grid d-flex flex-wrap">
    <div class="col-xs-12 col-sm-4 col-md-3">
      <div class="product-tile-inner">
        <img src="https://picsum.photos/600/600/?gravity=west">
        <div class="btn btn-block btn-sm btn-primary">More</div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-3">
      <div class="product-tile-inner">
        <img src="https://picsum.photos/600/600/?gravity=west">
        <div class="btn btn-block btn-sm btn-primary">More</div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-3">
      <div class="product-tile-inner">
        <img src="https://picsum.photos/600/600/?gravity=west">
        <div class="btn btn-block btn-sm btn-primary">More</div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-3">
      <div class="product-tile-inner">
        <img src="https://picsum.photos/600/600/?gravity=west">
        <div class="btn btn-block btn-sm btn-primary">More</div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-3">
      <div class="product-tile-inner">
        <img src="https://picsum.photos/600/600/?gravity=west">
        <div class="btn btn-block btn-sm btn-primary">More</div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-3">
      <div class="product-tile-inner">
        <img src="https://picsum.photos/600/600/?gravity=west">
        <div class="btn btn-block btn-sm btn-primary">More</div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-3">
      <div class="product-tile-inner">
        <img src="https://picsum.photos/600/600/?gravity=west">
        <div class="btn btn-block btn-sm btn-primary">More</div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-3">
      <div class="product-tile-inner">
        <img src="https://picsum.photos/600/600/?gravity=west">
        <div class="btn btn-block btn-sm btn-primary">More</div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-3">
      <div class="product-tile-inner">
        <img src="https://picsum.photos/600/600/?gravity=west">
        <div class="btn btn-block btn-sm btn-primary">More</div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-3">
      <div class="product-tile-inner">
        <img src="https://picsum.photos/600/600/?gravity=west">
        <div class="btn btn-block btn-sm btn-primary">More</div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-3">
      <div class="product-tile-inner">
        <img src="https://picsum.photos/600/600/?gravity=west">
        <div class="btn btn-block btn-sm btn-primary">More</div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-3">
      <div class="product-tile-inner">
        <img src="https://picsum.photos/600/600/?gravity=west">
        <div class="btn btn-block btn-sm btn-primary">More</div>
      </div>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>