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

想要使图像和下面的div具有相同的宽度。

正常工作，直到窗口大小达到545px至575px为止。 .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;
}

最佳答案

bootstrap .img-responsive类有一个max-width:100%;，但是它没有设置宽度。
因此，为该类添加一个宽度。

.img-responsive {
  width: 100%;
}

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