javascript - 将剩余的引导列居中

Question

我有一个布局，有时会在末尾有奇数的 1、2 或 3 列，如下所示：

我正在寻找写一些东西，如果它们是没有完成一行的剩余列然后显示在中间，如下所示：

我知道这可能很棘手，好像还有 3 个剩余项目，它可能必须更改列结构。

这些项目是动态引入的，因此一旦布局应用代码将无济于事......

如果其中一个容器仅包含 2 个项目，这也很有用，这些项目 id 喜欢显示为居中而不是左

我似乎找不到这样做的好方法，我在引导站点上看不到任何东西。

这是我正在使用的代码 - 我希望 Bootstrap 有一个可以添加到执行此操作的项目的类，但我似乎看不到任何东西

甚至可能吗？谢谢你看:)

body {
  padding: 50px;
}
.item {
  width: 100%;
  height:50px;
  display:block;
  background-color: dodgerblue;
  margin-bottom:20px;
  color:#fff;
  text-align:center;
  padding-top:12px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>



<div class="container">
  <div class="row">
    <div class="col-3"><div class="item"></div></div>
    <div class="col-3"><div class="item"></div></div>
    <div class="col-3"><div class="item"></div></div>
    <div class="col-3"><div class="item"></div></div>
    <div class="col-3"><div class="item"></div></div>
    <div class="col-3"><div class="item"></div></div>
    <div class="col-3"><div class="item"></div></div>
    <div class="col-3"><div class="item"></div></div>
    <div class="col-3"><div class="item">CENTER</div></div>
    <div class="col-3"><div class="item">CENTER</div></div>
  </div
</div

标签： javascripthtmlcssbootstrap-4