css - badge-pill 和 h2 水平对齐

Question

我正在学习 Bootstrap。我想创建一个大标题，然后是 3 个小 水平居中的徽章丸。我发现了 2 个问题:

1-badge-pills堆叠在一起没有任何空格，这可能是右推的原因。我不得不插入一个“空白徽章药丸”来创建空间(也许不是最好的主意)。

2-header 和 badge-pill 没有水平对齐，我没有解决这个问题，所以请帮忙。

编辑:我想要的可能看起来很像导航栏，我假设存在更简单的方法。

代码:

<div class="container border p-3">
   <span class="h2 align-middle">Heading 1</span>

      <span class="badge badge-pill badge-dark align-middle p-2 pull-right">Top</span>  
      <span class="badge badge-pill badge-light pull-right">&nbsp</span>
      <span class="badge badge-pill badge-dark align-middle p-2 pull-right">Prev.</span> 
      <span class="badge badge-pill badge-light pull-right">&nbsp</span>
      <span class="badge badge-pill badge-dark align-middle p-2 pull-right">Next</span> 

    </div>

fiddle :code

Answer 1

将类 d-flex justify-content-between 添加到 div:

<div class="container border p-3 d-flex justify-content-between">