奇怪的引导网格失败？

Question

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

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

这是我的代码：

<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 不是必须的，它在最后使用的最小宽度类下总是 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>