image - 如何使一行三张图片响应

Question

使用 Twitter Bootstrap 3，我有一个容器、三个 div 占位符和三个填充为链接的图像，每个图像并排 float 并占据整行:当我将屏幕最小化到让它响应，我只看到第一张图片(第二张图片消失了)。我必须采取什么步骤来确保每个图像都变得响应并且在最小化的 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/这很容易理解。包裹图像的 div 需要应用网格类。