如何在 Bootstrap 中将药丸对齐到中心？

在 Bootstrap 中，我们可以使用 d-flex 和 justify-content-center 类来使药丸对齐到中心。以下是如何实现的步骤：

1. 创建一个包含药丸的 div 元素。

<div class="d-flex justify-content-center">
  <span class="badge badge-pill badge-primary">药丸</span>
</div>

2. 在 div 元素上应用 d-flex 类，以将其设置为容器，并在药丸元素上应用 badge 和 badge-pill 类，以将其设置为药丸样式。

3. 在容器 div 上应用 justify-content-center 类，以在水平方向上将药丸对齐到中心。此类还可用于在垂直方向上将元素对齐到中心，但这对于药丸元素并不适用。

完整代码如下：

<div class="d-flex justify-content-center">
  <span class="badge badge-pill badge-primary">药丸</span>
</div>

这是一个简单而有效的方法，可在 Bootstrap 中将药丸对齐到中心。您可以根据需要自定义药丸样式，并在容器 div 中使用其他布局类来适应您的页面布局需求。