在bootstrap文本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>