Bootstrap柱内容居中和绝对定位

Question

我有一个包含3列的引导行。除移动设备外，所有列均水平显示。在移动设备中，它们垂直堆叠，这就是我想要的......这就是问题所在。

我在3列中的每一列中都有响应（img-responsive）图像。在移动显示器中，我希望图像在列中居中。最重要的是，我需要在响应式图像上有2个div，绝对定位。它适用于铬，但在I.E.和FireFox，图像没有响应，因为外部div有显示：内联块。

以下是代码：

<div class="row">
    <div class="col-md-4 col-sm-6" style="text-align:center;">
        <div style="margin-bottom:15px;position:relative;display: inline-block;">
            <div style="position:absolute;top:0;right:0;padding:5px;font-weight:bold;background-color:#bb091f;color:#FFF;">
                Live Deal
            </div>
            <img class="img-responsive" style="border:solid 1px #666;display:inline-block !important;" src="http://www.weekesisland.com/photos/atv.jpg" />
            <div class="deal2Timer" style="position:absolute;bottom:1px;right:1px;width:190px;opacity:.9;"></div>
        </div>
    </div>
    <div class="col-md-4 col-sm-6" style="text-align:center;">
        <div style="margin-bottom:15px;position:relative;display: inline-block;">
            <div style="position:absolute;top:0;right:0;padding:5px;font-weight:bold;background-color:#bb091f;color:#FFF;">
                Live Deal
            </div>
            <img class="img-responsive" style="border:solid 1px #666;display:inline-block !important;" src="http://www.weekesisland.com/photos/atv.jpg" />
            <div class="deal3Timer" style="position:absolute;bottom:1px;right:1px;width:190px;opacity:.9;"></div>
        </div>
    </div>
    <div class="col-md-4 col-sm-6" style="text-align:center;">
        <div style="margin-bottom:15px;position:relative;display: inline-block;">
            <div style="position:absolute;top:0;right:0;padding:5px;font-weight:bold;background-color:#bb091f;color:#FFF;">
                Live Deal
            </div>
            <img class="img-responsive" style="border:solid 1px #666;display:inline-block !important;" src="http://www.weekesisland.com/photos/atv.jpg" />
            <div class="deal4Timer" style="position:absolute;bottom:1px;right:1px;width:190px;opacity:.9;"></div>
        </div>
    </div>
</div>

以下是chrome与firefox的相似之处。

Chrome桌面：

Chrome移动版：

在移动设备中，当窗口宽度小于图像时，图像会因图像反应而缩放。

Firefox桌面：

Firefox Mobile

请注意firefox图像不再响应....但它在移动显示中的列中居，并且2 div的绝对定位是正确的。

有没有办法实现跨浏览器兼容？我尝试了很多选项，但没有内联块，我无法在响应式图像上正确定位绝对元素，也无法在移动显示的列中居中。

Answer 1

为了获得更好的结果作为响应式图像，我使用jQuery。

你应该尝试类似：example jQuery reponsive image with CODEPEN link

Answer 2

以下是我为解决这个问题而采取的措施......它比我想象的要简单：

<div class="col-md-4 col-sm-6" style="text-align:center;">
    <div class="homeLiveDealMobile">
        <div class="liveDealBlock">
            Live Deal
        </div>
        <img class="img-responsive imgBorder" src="http://www.weekesisland.com/photos/atv.jpg" />
        <div class="deal3Timer homepageTimer"></div>
    </div>
</div>

CSS：

.liveDealBlock {
    position:absolute;
    top:0;
    right:0;
    padding:5px;
    font-weight:bold;
    background-color:#bb091f;
    color:#FFF;
}

.homeLiveDealMobile {
    margin-bottom:15px !important;
    position:relative;
}

.homepageTimer {
    position:absolute;
    bottom:1px;
    right:1px;
    width:190px;
    opacity:.9;
}

@media(max-width:767px){
    .homeLiveDealMobile {
        max-width:391px !important;
        margin:auto;
    }
}