ブートストラップのテキスト上のテキストdivは幅を超えて、イメージの幅をどのように揃えるのですか？

Question

.headerの背景を画像の幅と同じサイズに揃えようとしているため、画像に応じて拡大縮小されます。ここで

それはcodepenである：https://codepen.io/jggrs/pen/owKdvz?editors=1100

私はそれが見えるようにしたい：http://imgur.com/a/yK7KP

HTML

<div class="container"> 
    <div class="row"> 

    <div class="first-column col-md-4 col-sm-6 col-xs-12"> 
    <div class="header">header</div> 
    <img class="img-responsive" src="https://unsplash.it/500"> 
    </div> 

    <div class="second-column col-md-4 col-sm-6 col-xs-12"> 
    <div class="header">header</div> 
    <img class="img-responsive" src="https://unsplash.it/500"> 
    </div> 

    <div class="third-column col-md-4 col-sm-6 col-xs-12"> 
    <div class="header">header</div> 
    <img class="img-responsive" src="https://unsplash.it/500"> 
    </div> 

    </div> 
    </div> 

CSS

.first-column{background-color: #c0c0c0} 
    .second-column{background-color: #808080} 
    .third-column{background-color: #778899} 

    .header{ 
    position: absolute; 
    bottom: 0px; 
    background-color: red; 
    width: 100%; 
    color: #ffffff; 
    } 

Answer 1

これを見てみましょう： Relative absolute positioning

.first-column{background-color: #c0c0c0} 
 
.second-column{background-color: #808080} 
 
.third-column{background-color: #778899} 
 

 
.header { 
 
    background-color: red; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 15px; 
 
    right: 15px; 
 
    float: bottom; 
 
} 
 

 
.col { 
 
    position: relative 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 

 
    <div class="first-column col col-md-4 col-sm-6 col-xs-12"> 
 
     <div class="header">header</div> 
 
     <img class="img-responsive" src="https://unsplash.it/500"> 
 
    </div> 
 

 
    <div class="second-column col col-md-4 col-sm-6 col-xs-12"> 
 
     <div class="header">header</div> 
 
     <img class="img-responsive" src="https://unsplash.it/500"> 
 
    </div> 
 

 
    <div class="third-column col col-md-4 col-sm-6 col-xs-12"> 
 
     <div class="header">header</div> 
 
     <img class="img-responsive" src="https://unsplash.it/500"> 
 
    </div> 
 

 
    </div> 
 
</div>