引导网格向左偏移

Question

我有一个简单的引导程序布局。 我需要在列之间创建空间，因此我使用了一些偏移量类。只有一个挑战。我需要第一行在左边（左边没有空格），第二行在第一行和最后一行的中间，因此它们都将对齐。

在引导程序中怎么可能？我尝试使用偏移系统，但似乎无法正常工作。

这是我到目前为止尝试过的：

<div class="row posts">
      <div class="col-lg-3 offset-lg-1 post">
        <span class="post-title block">headline col 1</span>
        <span class="post-content block">content</span>
        <a class="read-more block" href="">Read more</a>
      </div>
      <div class="col-lg-3 offset-lg-1 post">
        <span class="post-title block">headline col 2</span>
        <span class="post-content block">content</span>
        <a class="read-more block" href="">Read more</a>
      </div>
      <div class="col-lg-3 offset-lg-1 post">
        <span class="post-title block">headline col 3</span>
        <span class="post-content block">content</span>
        <a class="read-more block" href="">Read more</a>
      </div>
    </div>
  </div>

检查此小提琴： https://jsfiddle.net/7a8tz591/

上面给出了以下结果，我想要这里解释：

Answer 1

可以使用boostrap flex盒：

<div class="wrapper">
<div class="container">
  <div class="row posts  d-flex justify-content-between">
    <div class="col-lg-3 post">
      <span class="post-title block">headline col 1</span>
      <span class="post-content block">content</span>
      <a class="read-more block" href="">Read more</a>
    </div>
    <div class="col-lg-3 post">
      <span class="post-title block">headline col 2</span>
      <span class="post-content block">content</span>
      <a class="read-more block" href="">Read more</a>
    </div>
    <div class="col-lg-3 post">
      <span class="post-title block">headline col 3</span>
      <span class="post-content block">content</span>
      <a class="read-more block" href="">Read more</a>
    </div>
  </div>
</div>

我从每个div块中删除了类offset-lg-1。