Bootstrap 4-通过2个元素实现弹性+证明内容中心

Question

利用d-flex，justify-content-center和flew-grow-1，我在3格的情况下达到了预期的效果。

<div class="row bg-primary d-flex justify-content-center">
  <div class="col-auto">
      LEFT
  </div>
  <div class="col-auto flex-grow-1 text-center">
      Middle
  </div>
  <div class="col-auto">
      Right
  </div>
</div>

我想用2个div达到相同的效果，而中间一个被迫成为精确的中心。但是，如果我尝试删除“ Right”元素，则无法计算中心。

<div class="row bg-primary d-flex justify-content-center">
  <div class="col-auto">
      LEFT
  </div>
  <div class="col-auto flex-grow-1 text-center">
      Middle
  </div>
</div>

是否有一种方法可以强制“ Middle”精确地居中，而左或右div根据需要从“ Middle”中获取空间？ 类似于左图和中图的所有位置与第一张图片中的位置相同，但是“右” div不存在。

提琴http://jsfiddle.net/4a7tLf0m/

---

我可以通过指定指定的列大小（col-3而不是col-auto）来达到相同的效果，但是我不喜欢需要明确的事实。这是唯一的方法吗？

Answer 1

不需要时，将右/左div保留为invisible。这样，中间位置将始终占据与其他两个div不存在时完全相同的位置。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container">
  <div class="row bg-primary d-flex justify-content-center">
    <div class="col-auto">
      LEFT
    </div>
    <div class="col-auto flex-grow-1 text-center">
      Middle
    </div>
    <div class="col-auto">
      Right
    </div>
  </div>

  <hr/>

  <div class="row bg-primary d-flex justify-content-center">
    <div class="col-auto">
      LEFT
    </div>
    <div class="col-auto flex-grow-1 text-center">
      Middle
    </div>
    <div class="col-auto invisible">
      Right
    </div>
  </div>

  <hr/>

  <div class="row bg-primary d-flex justify-content-center">
    <div class="col-auto invisible">
      LEFT
    </div>
    <div class="col-auto flex-grow-1 text-center">
      Middle
    </div>
    <div class="col-auto">
      Right
    </div>
  </div>
</div>