Question

我正在学习Bootstrap。我想创建一个大标题，然后创建3个 small 水平居中的徽章药片。我发现了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>

提琴：code

Answer 1

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

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

徽章丸和h2水平对齐

1 个答案: