全宽响应式图像重叠引导程序 3.

Full width Responsive Images Overlap Bootstrap 3

本文关键字：重叠 引导程序 图像 响应      更新时间：2023-09-26

我创建了一个网格，左边是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

我会将整个代码添加到这里，但不幸的是它有很多依赖项。

请从这里查看。

三十 

    <!-- 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;
}

这似乎是您问题的原因。

相关文章：