Image 如何使一行三幅图像具有响应性

使用Twitter Bootstrap 3，我有一个容器、三个div占位符和三个图像，它们作为链接填充，每个链接并排浮动并占据整行：当我最小化屏幕以使其响应时，我只看到第一个图像（第二个图像消失）。我必须采取哪些步骤来确保每个图像都具有响应性，并且在Minimized dmobile显示屏上一个接一个地显示

请注意：每个Img。已对其应用class=“img responsive”

HTML:

 <!--Wide Display Container -->     
  <div class="wide-display">
   <div id="firstholder">
     <a href="home.html" title="Home" class="imglink"><img src="/images/slide2.JPG" alt="City Lights Image"  class="img-responsive" id="electricone"> 
       <div class="item1">
         <h1 class="slickfont1" >First Title</h1>
       </div> 
      </a>
   </div>
     <div id="secondholder">
       <a href="office.html" title="Office" class="imglink"><img src="/images/ant.JPG" alt="City Lights Image"  class="img-responsive" id="electrictwo">           
      <div class="item1">
        <h1 class="slickfont1" >Second Title</h1> </div></a>
      </div>
     <div id="thirdholder">
        <a href="reviews.html" title="Locations" class="imglink"><img src="/images/family.JPG" alt="City Lights Image"  class="img-responsive" id="thirdelectric"> 
        <div class="item1">
         <h1 class="slickfont1" > Third Title</h1>
        </div>
        </a>

   </div>
</div><!-- Wide Display Container -->

---

您必须创建引导网格才能使其正常工作。您可以在这里阅读文档：它很容易理解。包装图像的

div

需要应用网格类

一旦我使用网格系统，我会放弃我自己的个性化尺码吗？这要看情况而定。您可以保持浮动大小，但固定大小将使网格无法响应。我会删除所有你拥有的样式，并在你得到基本网格以你想要的方式工作后应用它们。

.wide-display  {
    min-width:33%;
    position: relative;
    width: 100%;
    height:100%;
    margin-top:6px;
    overflow: hidden;
    height:366px;
}


/*! First img Holder */

#firstholder {
    width: 449px;
    height: 100%;
    float:left;
    display:inline-block;
    margin-left:1px;
    margin-right:0px;
}


.item1 {
    width: 24%;
    margin:  auto;
    position:relative;
}



#secondholder {
    width: 450px;
    height: 100%;
    float:left;
    display:inline-block;
    margin-right:0px;

}

#thirdholder {
    width: 449px;
    height: 100%;
    float:left;
    display:inline-block;
}