为什么Bootstrap行中的某些图像以方格图案出现？

Question

我正在使用Bootstrap进行产品页面，大多数图像都显示正常，但两个底行的最后一行检查屏幕尺寸较小。

To let you know what I mean I've included an image here.

以下是其中一行无效的代码：

<div class= "row">

  <div class="col-sm-6 col-md-3">

  <img src="images/seasonal_1.jpg">

  </div>

  <div class="col-sm-6 col-md-3">

  <img src="images/seasonal_2.jpg">

  </div>

  <div class="col-sm-6 col-md-3">

  <img src="images/seasonal_3.jpg">

  </div>

  <div class="col-sm-6 col-md-3">

  <img src="images/seasonal_4.jpg">

  </div>

</div>

Answer 1

当你有一些增加元素大小的填充或边框时，通常会发生这种情况。

网格在％的基础上工作，所以如果你有2个元素，每个宽度等于50％但是你添加了一些像填充或边框的东西你总是超过100％并且元素被推到下一个线。

我的建议（假设我没有实际代码）将使用浏览器开发工具查看您的样式，以查看发生这种情况时应用的样式。你应该能够找到有问题的财产。

希望即使不是明确的答案，这也很有用。

Answer 2

因此，我最终通过使所有图像具有完全相同的大小/尺寸（某些像素减少了几个像素）来解决此问题。只是以为我会对此进行跟进。

后来我又发现，如果在图片下面有多余的一行或两行文字，可能会使图案消失。