Twitter bootstrap 引导显示行/列中的空白

我的网页中有一种情况，行/列设置（基于引导）中的项目在不应该显示的地方显示空白。请参阅此图：

它是一个container div，有一个row div，然后是一大堆列（确切地说：col-lg-4）

“千禧黄金”和“午夜油”之间的垂直空白不应该存在

我认为这并不重要，但我使用React（即Javascript）构建页面

我希望任何人都能对此有所了解

谢谢

[更新]

以下是此页面的控制台输出：

这是我的附加CSS：

html{
身高：100%；
}
身体{
保证金：0；
填充：0；
字体：140%无衬线；
}
输入{
字体大小：110%；
大纲：0；
}
琼伯伦先生{
颜色：#eee；
背景色：#333；
}
.导航栏菜单{
垫面：5px；
垫底：5px；
页边距底部：0；
}
.搜索栏包装器{
宽度：100%；
}
.混合项目{
填充顶部：15px；
垫底：15px；
}
.混合项目名称{
}
.混合项目描述{
颜色：rgba（0,0,0,0.7）；
填充顶部：10px；
}
1.混合烤肉{
填充顶部：15px；
垫底：5px；
颜色：rgba（0,0,0,0.6）；
}
.结果项目{
填充底部：30px；
}
.结果项目h5{
颜色：rgba（0,0,0,0.6）；
}
.结果项内容h2{
利润上限：-6px；
}
.结果项目h2小{
颜色：rgba（0,0,0,0.7）；
}
.结果项内容{
背景色：#FFFAF0；
外形：1px固体玫瑰色；
填充：15px 15px 15px 30px；
}
.结果项内容hr{
显示：块；
高度：1px；
边界：0；
边框顶部：1px实心rosybrown；
边缘底部：12px；
填充：0；
}
.结果项目内容ul.list-inline li{
颜色：rgba（6,10,26,0.7）；
}
@媒体屏幕和屏幕（最小宽度：640像素）{
.搜索栏包装器{
最小宽度：480px；
宽度：40%；
}
}
.搜索栏字段{
位置：相对位置；
}
.搜索栏输入{
-webkit外观：无；
边框：1px实心#ddd；
边界半径：2px；
框大小：边框框；
保证金：0；
填充：10px40px10px10px；
宽度：100%；
}
.有建议。搜索栏输入{
边框左下半径：0；
边框右下半径：0；
}
.图标{
背景位置：中心；
背景重复：无重复；
边界：0；
光标：指针；
字号：0；
身高：100%；
大纲：0；
填充：0；
位置：绝对位置；
右：0；
排名：0；
宽度：25px；
}
.搜索栏清除{
背景图像：url（../public/img/cancel.svg）；
背景大小：25%；
右：40px；
宽度：40px；
}
.搜索栏提交{
背景色：#E5；
背景图像：url（../public/img/search.svg）；
背景大小：35%；
边框：1px实心#ddd；
边框右上角半径：2px；
边框右下半径：2px；
填充：0 20px；
不透明度：.8；
宽度：40px；
}
.搜索栏提交：悬停{
不透明度：1；
}
.已聚焦。搜索栏输入，
。已聚焦。搜索栏提交{
边框颜色：#ccc；
}
.搜索栏建议{
边框：1px实心#ccc；
边框左下半径：2px；
边框右下半径：2px；
框大小：边框框；
字体大小：100%；
列表样式：无；
保证金：0；
填充：0；
位置：相对位置；
顶部：-1px；
}
.搜索栏建议李{
游标：默认值；
字母间距：0.03em；
填充：12px 7px 12px 10px；
-webkit点击突出显示颜色：透明；
}
.搜索栏建议李：最后一个孩子{
边界：无；
}
。搜索栏建议。突出显示{
背景:#f5；
}
.搜索标题{
宽度：100%；
}
.logo home{
左边距：72px；
}
.标志{
浮动：左；
}
.logo：：之后{
明确：两者皆有；
}
.搜索框{
边缘顶部：60像素；
}
.结果标题{
字体系列：“衬线”；
边缘底部：20px；
}
.结果标题h3{
字号：18px；
}
.结果机构{
}
.结果框{
浮动：左；
边缘顶部：60像素；
}
.结果框：：之后{
明确：两者皆有；
}
.咖啡厅{
浮动：左；
边缘顶部：20px；
}
.咖啡豆{
边缘顶部：50px；
}
.豆盒{
浮动：左；
边缘顶部：20px；
}
.bean图像{
边缘顶部：10px；
边缘底部：20px；
}
.虚拟容器{
利润率最高：20%；
}
.leftimage{
浮动：左；
}
.righttext{
左边距：60像素；
浮动：无；
}
.righttext h2{
边缘顶部：15px；
}
.hcenter{
文本对齐：居中；
}
.vcenter{
最小高度：60%；/*vh装置的备用高度*/
最小高度：60vh；/*您可能还希望使用
而不是“height”属性。
请注意，对于
“高度”或“最小高度”属性，
父元素的“高度”
应该明确指定。
在本例中，“.vertical center”的父级
元素是什么*/
/*让它成为一个flex容器*/
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
/*垂直对齐引导程序的容器*/
-webkit框对齐：居中；
-webkit对齐项目：居中；
-moz框对齐：居中；
-ms-flex-align：居中；
对齐项目：居中；
/*在Firefox 9等传统web浏览器中
我们需要指定flex容器的宽度*/
宽度：100%；
/*此外，“margin:0 auto”对此类web浏览器中的flex项目没有任何影响
因此引导的容器将不再与中心对齐。
因此，我们应该使用以下声明使其再次居中*/
-webkit盒包：中心；
-莫兹盒包装：中心；
-ms-flex-pack:center；
-webkit内容：中心；
证明内容：中心；
}

这是

浮点：left

CSS属性值不可避免的影响

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <div class="big-and-tall"></div>
    </div>
    <div class="col-sm-4">
      <div class="big-and-short"></div>
    </div>
    <div class="col-sm-4">
      <div class="big-and-short"></div>
    </div>
    <div class="col-sm-4">
      <div class="big-and-kinda-tall"></div>
    </div>
    <div class="col-sm-4">
      <div class="big-and-short"></div>
    </div>
    <div class="col-sm-4">
      <div class="big-and-short"></div>
    </div>
    <div class="col-sm-4">
      <div class="big-and-kinda-tall"></div>
    </div>
  </div>
</div>

.big-and-tall {
  width: calc(100% - 20px);
  height: 500px;
  margin: 10px;
  background-color: green;
}

.big-and-short {
  width: calc(100% - 20px);
  height: 200px;
  margin: 10px;
  background-color: red;
}

.big-and-kinda-tall {
  width: calc(100% - 20px);
  height: 300px;
  margin: 10px;
  background-color: brown;
}

@media (min-width: 1200px) {
  .blend-item:nth-child(3n+1) {
    clear: left;
  }
}