Bootstrap 的 d-flex 用来给元素设置：

display: flex;

它会让该元素成为 Flex 容器，其直接子元素按 Flexbox 规则排列，默认从左到右：

<div class="d-flex">
  <div>项目 1</div>
  <div>项目 2</div>
</div>

常与这些类搭配：

• justify-content-center：主轴居中
• justify-content-between：两端对齐
• align-items-center：交叉轴居中
• flex-column：改为纵向排列
• flex-wrap：允许换行
• gap-3：设置子元素间距

例如，让内容水平和垂直居中：

<div class="d-flex justify-content-center align-items-center">
  <span>居中内容</span>
</div>

还可以使用响应式形式，例如 d-md-flex，表示从 md 屏幕尺寸开始应用 display: flex。