Bootstrap 列内容居中和绝对定位

Question

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

我在 3 列中的每一列中都有响应式 (img-responsive) 图片。在移动显示中，我希望图像在列中居中。最重要的是，我需要 2 div 在响应图像上进行绝对定位。它在 chrome 中工作正常，但在 I.E.和 FireFox，由于外部 div 有 display:inline 块，图像没有响应。

代码如下：

<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 手机：

在移动端，当 windows 宽度小于图像时，图像会因 img-responsive 而缩放。

火狐桌面：

火狐手机

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

有什么方法可以做到这一点 cross-browser 兼容吗？我尝试了很多选项，但没有 inline-block，我无法将绝对元素正确定位在响应图像上，也无法在移动显示的列中居中。

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

Bootstrap 列内容居中和绝对定位

Bootstrap Column Content Centering and Absolute Positioning

twitter-bootstrap-3

cross-browser

css-position