Выравнивание ответных изображений Bootstrap с заголовком текста заголовка

Question

У меня есть эти 3 изображения столбцов с заголовком, значком объявления заголовка, который я не мог правильно выровнять. Есть ли способ исправить текст заголовка и заголовка в соответствии с шириной изображения? Какова наилучшая практика для такого контента? Должен ли я выравнивать CSS для каждого размера экрана?

@import url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css'); 
 
.urun-text { 
 
    position: absolute; 
 
    background-color: rgba(15, 15, 15, 0.93); 
 
    color: #fff; 
 
    bottom: 0px; 
 
    text-align: left; 
 
    padding: 20px 15px 20px 15px; 
 
} 
 
.urun-title { 
 
    position: absolute; 
 
    bottom: 80px; 
 
    text-align: left; 
 
    z-index: 15; 
 
    padding-top: 5px; 
 
    padding-bottom: 5px; 
 
    color: #fff; 
 
    padding-left: 20px; 
 
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6); 
 
    background-color: rgba(194, 0, 0, 0.93); 
 
    width: 100%; 
 
} 
 
.click-arrow-right { 
 
    position: absolute; 
 
    z-index: 16; 
 
    color: #fff; 
 
    font-size: 10px; 
 
    bottom: 0px; 
 
    right: 33px; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-4"> 
 
     <div class="product-box"> 
 
     <img src="http://i.imgur.com/xkAVZ3b.jpg" alt="Yeni Ürünler" class="align-center img-responsive"> 
 
     <div class="urun-title"><span class="glyphicon glyphicon-star"></span> YENİ ÜRÜNLER</div> 
 
     <div class="urun-text">En yeni mobilya konseptlerini görmek için tıklayınız.</div> 
 
     <div class="click-arrow-right"><span class="glyphicon glyphicon-arrow-right"></span> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <div class="product-box"> 
 
     <img src="http://i.imgur.com/xkAVZ3b.jpg" alt="Yeni Ürünler" class="align-center img-responsive"> 
 
     <div class="urun-title"><span class="glyphicon glyphicon-star"></span> YENİ ÜRÜNLER</div> 
 
     <div class="urun-text">En yeni mobilya konseptlerini görmek için tıklayınız.</div> 
 
     <div class="click-arrow-right"><span class="glyphicon glyphicon-arrow-right"></span> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <div class="product-box"> 
 
     <img src="http://i.imgur.com/xkAVZ3b.jpg" alt="Yeni Ürünler" class="align-center img-responsive"> 
 
     <div class="urun-title"><span class="glyphicon glyphicon-star"></span> YENİ ÜRÜNLER</div> 
 
     <div class="urun-text">En yeni mobilya konseptlerini görmek için tıklayınız.</div> 
 
     <div class="click-arrow-right"><span class="glyphicon glyphicon-arrow-right"></span> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    </div

Answer 1

Держи

http://jsfiddle.net/ajruk60t/3/

.product-box { 
    display:inline-block; 
    position:relative; 
} 

.urun-title { 
    width:100%; 

} 

.urun-text { 
    width:100%; 

} 

Установка дисплея в inline-block позволяет .product-box только быть столь же широко, как это содержание (а именно, изображение) , и position:relative позволяет установить ширину вложенного .urun-title и .urun-text элементы должны быть 100% от ширины .product-box.