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文件中）。

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

我在互联网上搜索了一段时间，但没有找到解决方案。由于我不是Web（前端）开发人员，因此我对HTML / CSS之类的经验很少。

如果有人可以给我一个解决方案或者指出我正确的方向，那么我可以自己解决，这将是不错的。

我希望尽可能避免使用其他JavaScript。

Answer 1

这是一个解决方案，但是由于bootstrap网格单元格中的所有div（col - * ...）绝对定位，他们不得不通过jquery脚本获取高度以避免重叠。

＆＃13;

.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%;
     
}

＆＃13;

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

＆＃13;

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

如何在bootstrap网格中制作响应式图像堆栈

1 个答案: