将图像放置在 twitter 引导程序的网格中答案

【问题标题】：Placing images in a twitter bootstrap's grid将图像放置在 twitter 引导程序的网格中
【发布时间】：2016-01-01 21:27:48
【问题描述】：

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

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

【问题讨论】：

标签： html css image twitter-bootstrap

【解决方案1】：

应用这个 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;
}

【讨论】：

效果很好！但我不明白，如何修复图像行下的空间。意思是这些：i.imgur.com/Eot9A81.jpg
如果你有直播，请给我链接
如果缩小一点，它会在JSFiddle 上看到。

【解决方案2】：

删除类行和 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%;}

【讨论】：