반응 형 부트 스트랩 이미지를 캡션 제목 텍스트와 정렬

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

당신은 내용의로 inline-block에 표시를 설정

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

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

.urun-title { 
    width:100%; 

} 

.urun-text { 
    width:100%; 

} 

만에 .product-box이 넓은 될 수 있습니다 이동 (즉, 이미지) , position:relative을 사용하면 중첩 된의 너비를 설정할 수 있습니다및 .urun-text 요소는 .product-box 너비의 100 %가되어야합니다.