Question

需要放置类似于此处的图片（例如）：http://imgur.com/QpRjvpW 不同尺寸的原始图片。悬停效果 - 模糊和雾化效果以及图片中间的文字。这是我现在得到的：JSFiddle

所以问题是，如何正确定位它们，使它们占据屏幕的整个宽度连续3个，大小相同，紧密贴合上下div和彼此，不在其境内扩张？并且模糊的效果不会触及相邻元素？

Answer 1

删除类行和col-lg-12，使用col-sm-12，如

<div class="col-sm-12">
                <div id="work1" class="col-sm-4">
                    <img class="image" src="http://i.telegraph.co.uk/multimedia/archive/03257/POTD-SKY-SQUIRREL_3257854k.jpg">
                    <p class="text">ONE</p>
                </div>
                <div id="work2" class="col-sm-4">
                    <img class="image" src="http://i.telegraph.co.uk/multimedia/archive/03235/potd-husky_3235255k.jpg">
                    <p class="text">TWO</p>
                </div>
                <div id="work3" class="col-sm-4">
                    <img class="image" src="http://s.hswstatic.com/gif/dolphin-pictures-1.jpg">
                    <p class="text">THREE</p>
                </div>
            </div>

CSS：

works img {
    height: 600px;
    width: 100%;}

Answer 2

应用此CSS，您将看起来像示例 -

.works img{
    display:block;
    max-width:100%;
}

.works [class^="col-"] {
    padding-left:0;
    padding-right:0;
}

.works .text{
    position:absolute !important;
    left: 0;
    right: 0;
}

将图像放在twitter bootstrap的网格中

2 个答案: