Размещение изображений в сетке твитер-бутстрапа

Question

Нужно разместить изображения вроде как здесь (например): http://imgur.com/QpRjvpW Оригинальные фотографии разных размеров. Эффект зависания - эффекты размытия и тумана и текст в середине изображения. Вот что я сейчас: JSFiddle

Таким образом, вопрос, как правильно расположить их так, что они занимают всю ширину экрана, 3 в ряде, будет таким же размером, прижатым к верхнему и ниже div и друг другу, не расширяются в пределах его границ? И эффект размытия не касается соседних элементов?

Answer 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; 
} 

Answer 2

Удалить класс строки и Col-LG-12, использование Col-см-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%;}