具有扩展图块的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>

我在每个div内都有一个小按钮，以使其扩展并显示更多详细信息，但是每当我单击任何按钮时，都会发生以下情况。

此外，这是gallery-outer类名称使用的CSS。

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

Answer 2

使用每行始终具有等高高度的项目制作网格。可以使用 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>