奇怪的自举网格失败了吗？

Question

我不确定我做错了什么，但是当我调整浏览器大小时，我在引导网格中遇到了一个奇怪的错误。它发生在一个像素的问题上，并在我不断调整大小时停止。网格中的一个图像不合适并且到达底部。我将附上失败的图片和另一张正常图片。

有谁知道这个bug是什么以及如何修复它？

这是我的代码：

<section class="container-fluid">

    <div class="row">
       <div class="col-xs-12"> <img id="imgClickAndChange" src="img.jpg" onclick="changeImage(1)"/> </div>
   </div>

   <div class="row no-pad">
       <div class="col-xs-12 col-md-6 col-lg-4"> 
          <img class="grid" src="img1.jpg"/>
       </div>

       <div class="col-xs-12 col-md-6 col-lg-4"> 
          <img class="grid" src="img2.jpg"/>
       </div>

       <div class="col-xs-12 col-md-6 col-lg-4"> 
          <img class="grid" src="img1.jpg"/>
       </div>
</div>
       <div class="row no-pad">
       <div class="col-xs-12 col-md-6 col-lg-4"> 
          <img class="grid" src="img2.jpg"/>
       </div>

       <div class="col-xs-12 col-md-6 col-lg-4"> 
          <img class="grid" src="img1.jpg"/>
       </div>

       <div class="col-xs-12 col-md-6 col-lg-4"> 
          <img class="grid" src="img.jpg2"/>
       </div>
   </div>

 </section>

我用的只有css： 它是一个定制的引导程序（但我唯一定制的是大屏幕的最小宽度，从1200px到1900px，并删除了网格贪图）

.grid { width: 100%;}

谢谢。

Answer 1

使用Bootstrap，尝试将类img-responsive应用于您的图片，以确保它们永远不会超过其父级的100％宽度。

<img class="img-responsive" src="img1.jpg"/>

文档：http://getbootstrap.com/css/#images

Answer 2

如果所有图像大小相同，则没有问题：

https://jsbin.com/muzug/1/

https://jsbin.com/muzug/1/edit?html,css,output

此外，没有必要使用col-xs-12，它将始终在使用的最后一个min-width类下100％。

添加了舍入纠错。

CSS：

.row.no-pad img {width:100.1%;}
.row.no-pad [class*="col-"] {padding:0;margin-bottom:-1px}

HTML

 <section class="container-fluid">


       <div class="row no-pad">

           <div class="col-md-6 col-lg-4"> 
              <img src="https://scontent-a-lhr.xx.fbcdn.net/hphotos-xap1/t31.0-8/1617132_1517052665201751_3430332756563801835_o.jpg">
           </div>

           <div class="col-md-6 col-lg-4"> 
              <img src="https://scontent-a-lhr.xx.fbcdn.net/hphotos-xap1/t31.0-8/1617132_1517052665201751_3430332756563801835_o.jpg">
           </div>

                <div class="col-md-6 col-lg-4"> 
              <img src="https://scontent-a-lhr.xx.fbcdn.net/hphotos-xap1/t31.0-8/1617132_1517052665201751_3430332756563801835_o.jpg">
           </div>

           <div class="col-md-6 col-lg-4"> 
              <img src="https://scontent-a-lhr.xx.fbcdn.net/hphotos-xap1/t31.0-8/1617132_1517052665201751_3430332756563801835_o.jpg">
           </div>

           <div class="col-md-6 col-lg-4"> 
              <img src="https://scontent-a-lhr.xx.fbcdn.net/hphotos-xap1/t31.0-8/1617132_1517052665201751_3430332756563801835_o.jpg">
           </div>

           <div class="col-md-6 col-lg-4"> 
              <img src="https://scontent-a-lhr.xx.fbcdn.net/hphotos-xap1/t31.0-8/1617132_1517052665201751_3430332756563801835_o.jpg">
           </div>

      </div>
   </div>