Бейдж-таблетка и горизонтальное выравнивание h2

Question

Я изучаю Bootstrap.Я хотел создать большой заголовок, за которым следовали 3 маленькие горизонтально центрированные бейдж-таблетки.Я обнаружил 2 проблемы:

1-Таблетки-таблетки, сложенные вместе без пробелов, это может быть из-за толчка вправо.Мне пришлось вставить «пустую таблетку-бейдж», чтобы создать пространство (возможно, не самая лучшая идея).

2-Заголовок и таблетки-бейджи не выровнены по горизонтали, у меня нет исправлений для этогоодин, поэтому, пожалуйста, помогите.

Редактировать: То, что я хочу, может выглядеть очень похоже на Navbar, я предполагаю, что существует более простой способ.

Код:

<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>

скрипка: код

Answer 1

Добавьте классы d-flex justify-content-between в div:

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