砌体和Bootstrap 4列之间不需要的空间

Question

在使用Bootstrap 4时，我似乎无法摆脱Masonry所提供的空间。它应该在同一行中有3列，但它却创造了一个空间因此它只显示2。

HTML

<div class="le">
<div class="row">
  <div class="grid-sizer col-xs-4"></div>
    <div class="grid-item col-xs-4">o
    </div>
    <div class="grid-item col-xs-4">o
    </div>
    <div class="grid-item col-xs-4">o
    </div>
    <div class="grid-item col-xs-4">o
    </div>
    <div class="grid-item col-xs-4">o
    </div>
    <div class="grid-item grid-item-height col-xs-4">o
    </div>
    <div class="grid-item col-xs-4">o
    </div>
    <div class="grid-item col-xs-4">o
    </div>
    <div class="grid-item col-xs-4">o
    </div>
</div>
</div>

CSS

.le { width: 800px;
border: 1px solid #000;

}
.grid-item {
  height: 100px;
  background: #D26;
  border: 2px solid hsla(0, 0%, 0%, 0.5);
}
.grid-item-height { height: 200px;}

JS

// external js: masonry.pkgd.js

$('.le').masonry({
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true
});

以下是链接：https://codepen.io/anon/pen/LrprPd