Html 在twitter引导程序中放置图像'；s网格

需要像这里这样放置图像（例如）： 不同尺寸的原始图片。 悬停效果-图片中间的模糊和模糊效果以及文本。 以下是我现在得到的：

---

所以问题是，如何正确地定位它们，使它们在屏幕的整个宽度上连续占据3个，大小相同，紧密地附着在上下

div

上，彼此之间，不在其边界内扩展？模糊的效果不会影响相邻元素？

应用此css，您将得到与示例类似的效果--

---

移除类别行和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>

---

很好！但我不知道，如何修复图像行下的空间。意思是：如果你有它的生活，给我的链接上看到的，如果缩小一点。

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

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