Question

我在尝试在响应式引导网格中使用图像叠加时遇到了问题。当页面被完全筛选时，一切看起来都很好，但是当它低于980宽度时，图像会从网格的底部渗出，但随后页面越小看起来越好越好。我知道我可以使用媒体查询，但有一个我可以忽略的解决方案吗？

HTML：

<div class="row">
    <div class="col-md-6">
        <div class="col-md-12">
            <div class="content-section">
                 <h1>Placeholder</h1>

                <p>Placeholder</p>
            </div>
        </div>
        <div class="col-md-12">
            <div class="content-section">
                 <h1>Placeholder</h1>

                <p>Placeholder</p>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="col-md-12">
                <div class="content-section">
                     <h1>Placeholder</h1>

                    <p>Placeholder</p>
                </div>
            </div>
            <div class="col-md-12">
                <div class="content-section">
                     <h1>Placeholder</h1>

                    <div class="image-overlay">
                        <img class="bottom img-responsive" src="http://placehold.it/932x468">
                    </div>
                    <p>PlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholder</p>
                                                </div>
                </div>
            </div>
        </div>

CSS

.content-section {
    position: relative;
    background-color: #2c2c2c;
    padding: 20px;
    margin-bottom 20px;
}
.image-overlay {
    position: relative;
    margin: 0 auto;
    height: 320px;
}
#image-overlay img {
    position: absolute;
    left: 0;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}
#image-overlay img.top:hover {
    opacity: 0;
}

我在这里创建了一个JSFiddle：https://jsfiddle.net/1f8cbm2y/

谢谢！

Answer 1

我认为这给你解决了平板电脑的问题。因此，如果没有媒体查询，您可以将col-sm-*用于平板电脑。

这是jsfiddle solution。

具有响应网格的图像叠加

1 个答案: