如何使一排三个图像响应

Question

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

请注意：每个图片。已经应用了 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 -->

CSS：

.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;
}

Answer 1

您必须创建 Bootstrap Grid 才能使其工作。你可以在这里阅读文档：http://getbootstrap.com/css/ 这很容易理解。包装图像的divs 需要应用网格类。