html - 如何在 Bootstrap 网格中制作响应式图像堆栈

Question

我正在创建一个小型网站作为家庭元素来展示我的作品。在主页上，我想展示最近更新的收藏，其中最新的作品像一叠带有小偏移的卡片一样堆叠。每个堆栈都有自己的网格列。

这是我目前所拥有的:http://www.bootply.com/Dus21AApn5

   <div class="container-flow">
     <h2> Recent Collection Updates</h2>
      <div class="row" style="margin: 0.05%;">
        <div class="col-sm-4 col-xs-6">
            <div style="position: absolute; 
                        max-height: 200px;
                        margin: auto; 
                        overflow: hidden; 
                        top: 0px; 
                        left: 0px;
                        z-index: -0; 
                        -webkit-box-shadow: 2px 2px 1px 3px rgba(0,0,0,0.2);
                        -moz-box-shadow: 2px 2px 1px 3px rgba(0,0,0,0.2);
                        box-shadow: 2px 2px 1px 3px rgba(0,0,0,0.2);">
              <img style="max-width: 200px;" class="img-responsive" src="http://placehold.it/250x350">
            </div>
            ...
        </div>
        <div class="col-sm-4 col-xs-6"> ... </div>
        <div class="col-sm-4 col-xs-6"> ... </div>
      </div>
    </div>

代码有点乱，因为它是由模板引擎生成的(稍后我会将所有样式移动到 CSS 文件中)。

我让它工作，所以它看起来像图像相互堆叠，但不幸的是，同时它破坏了 Bootstrap 网格的响应能力。网格列不再堆叠，而是相互合并。我发现这是由于包含图像的 div 的位置被设置为绝对的。我找不到一种方法来保持我的图像堆栈并同时保持响应能力。

我在网上搜索了一段时间，没有找到解决办法。由于我不是网络(前端)开发人员，所以我对 HTML/CSS 等方面的经验很少。

如果有人可以给我一个解决方案或指出正确的方向以便我自己修复它，那就太好了。

我希望尽可能避免使用额外的 JavaScript。

Answer 1

这是一个解决方案，但由于 Bootstrap 网格单元格 (col-*...) 内的所有 div 都是绝对定位的，它们被迫通过 jquery 脚本获取它们的高度以避免重叠。

.imageBanner {
    display: block;
    position: relative;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    height: 40vw;
}
@media screen and (max-width: 767px) {
  .imgBanner {
     height: 30vw;
  }
}

.image1 {
  left: 0;
  top: 0;
   z-index: -1;
}

.image2 {
 top: 0;
  left: 10%;
  z-index: -2;
}

.image3 {
  top: 0;
  left: 20%;
   z-index: -3;
}
.imageBanner div {
  width: 75%;
  max-height: 85%;
  display: block;
  position: absolute;
  overflow: hidden;
    -webkit-box-shadow: 2px 2px 1px 3px rgba(0,0,0,0.2);
    -moz-box-shadow: 2px 2px 1px 3px rgba(0,0,0,0.2);
    box-shadow: 2px 2px 1px 3px rgba(0,0,0,0.2);
}
.imageBanner div img {
    width: 100%;
     
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-flow">
     <h2 class=""> Recent Collection Updates</h2>

    <div class="row" style="margin: 0.05%;">
        <div class="col-sm-4 col-xs-6">
            <div class="imageBanner">
                <div class="image1">
                    <img src="https://unsplash.it/600/400/" class="img-responsive">
                </div>
                <div class="image2">
                    <img src="https://unsplash.it/400/600/" class="img-responsive">
                </div>
                <div class="image3">
                    <img src="https://unsplash.it/500/500/" class="img-responsive">
                </div>
            </div>
        </div>
        <div class="col-sm-4 col-xs-6">
            <div class="imageBanner">
                <div class="image1">
                    <img src="https://unsplash.it/800/600/" class="img-responsive">
                </div>
                <div class="image2">
                    <img src="https://unsplash.it/200/200/" class="img-responsive">
                </div>
                <div class="image3">
                    <img src="https://unsplash.it/600/800/" class="img-responsive">
                </div>
            </div>
        </div>
        <div class="clearfix visible-xs-block"></div>
        <div class="col-sm-4 col-xs-6">
            <div class="imageBanner">
                <div class="image1">
                    <img src="https://unsplash.it/300/400/" class="">
                </div>
                <div class="image2">
                    <img src="https://unsplash.it/600/600/" class="">
                </div>
                <div class="image3">
                    <img src="https://unsplash.it/400/200/" class="">
                </div>
            </div>
        </div>
    </div>
</div>

您还可以在此处查看图像插入的另一种变体:https://stackoverflow.com/a/41048391/4206079