将响应式 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 的宽度元素为 .product-box 宽度的 100%。