[英]Full width Responsive Images Overlap Bootstrap 3
我创建了一个网格,其左侧为col-md-7,右侧为col-md-5。 然后我将图像放置在col-md-5上,这些图像具有响应性,并且采用col-md-12宽度-全宽
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-7">LEFT SIDE</div>
<div class="col-md-5">
<div class="row">
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt="" />
</div>
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt="" />
</div>
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
演示: http : //jsfiddle.net/r8rFc/298/
它运作良好,没有任何问题。 但是,我使用了一个名为Zozo UI选项卡的菜单。 当我将代码放入Zozo UI容器div中时,图像会重叠而不是彼此重叠。 因此,它只是显示最后的IMG
我将整个代码添加到此处,但不幸的是,它具有很多依赖性。
请从这里检查。
XXX
<!-- Overview -->
<div class="z-content z-active" style="position: relative; display: block; left: 0px; top: 0px;">
<div class="z-content-inner">
<div class="row">
<div class="col-md-7">
<div class="row">
<div class="col-md-12">
LEFT
</div>
</div>
</div>
<div class="col-md-5">
<div class="row">
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt=""/>
</div>
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt=""/>
</div>
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt=""/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
需要一种使图像相互重叠而不是重叠的方法。
你有
.productgroup img {
position: absolute;
}
这似乎是您遇到问题的原因。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.