Question

我正在尝试在Bootstrap3网站的背景上叠加一些文字：

<div class="row  media-thumbs">
    <div class="col-sm-3 col-xs-6">
        <div>
            <div class="thumb-overlay">Faculty</div>
            <a href="#">
            <img src="/default.png" class="pagethumb img-responsive">
            </a>
        </div>
    </div>
</div>

问题是当我添加css时：

.thumb-overlay {position: absolute;width: 100%;}

它会比直接的父容器扩展得更宽，它似乎试图成为下一个父母的100％！

我如何解决这个问题，因此它只是它的直接父母的100％？

Answer 1

将position:relative添加到父元素，使孩子相对于父元素绝对定位。

.col-sm-3.col-xs-6 > div {
    position:relative;
}

jsFiddle example - 它有效。从父元素position:relative中移除.col-sm-3.col-xs-6 > div以查看差异。

如果您想更具体，请使用：

.row.media-thumbs .col-sm-3.col-xs-6 > div {
    position:relative;
}

jsFiddle example

如何强制子div不溢出父div

1 个答案: