Question

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

请注意：每个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 -->

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需要应用网格类。

如何使一排三个图像响应

1 个答案: