调整响应引导图像与标题标题文本

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-text元素为.product-box的宽度的100％。