Bootstrap 4 如何在同一行上显示文本和图标

我正在使用bootstrap 4和Fontsome，希望在同一行上显示文本和图标。文本应位于左角，而图标应位于右角。目前，我无法将文本和图标保持在同一行，图标似乎移动到文本下方的一行。我怎样才能解决这个问题

等待行人的汽车穿过街道

这有帮助吗

<div class="card-header">
  <span class="d-inline">Cars waiting pedestrians cross the street

    <span class="d-inline btn float-right">
      <i class="fas fa-angle-down"></i>
   </span>

  </span>
</div>

等待行人的汽车穿过街道

编辑：根据HTML规范，在span内有一个span是有效的。有关创建嵌套

span

的更多信息，请阅读本SO帖子

编辑2：将类向右浮动添加到内部跨距，使箭头显示在右侧

试试这个。 我删除了d-flex，用浮动右键替换了调整内容结束 和d-inline到d-inline-block

等待行人的汽车穿过街道

此解决方案非常完美