html - 如何防止 div 在 col-md-12 上溢出？ ( Bootstrap 3)

Question

希望图片和下方的div保持相同的宽度。

工作正常，直到我达到大约 545 像素到 575 像素的窗口大小。 .header 仅在 col-md-12 处更改宽度比例。有没有办法保持相同的纵横比？

SCREENSHOT

CODEPEN

HTML

<div class="container">

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

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

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

<!--END ROW-->
</div> 

<!--END CONTAINER-->
</div>

CSS

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


.header{
background-color:rgba(45,44,89,0.7);
width: 100%;
color: #ffffff;
position: relative;
bottom: 40px;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
}

Answer 1

bootstrap .img-responsive 类有一个 max-width:100%; 但它没有设置宽度。
所以给类加一个宽度。

.img-responsive {
  width: 100%;
}

https://codepen.io/rickydam/pen/XarXYX