Html 引导：将内容与基线对齐

我试图找出如何将内容与基线对齐。我正在使用bootstrap框架，但一直无法这样做

<div class="row">
     <div class="col-12">
          <span class="h5">My Games</span>
          <button type="button" class="btn btn-info float-right" v-b-modal.create-game>New Game</button>
     </div>
</div>

我的游戏
新游戏

这就产生了：

当我查阅引导文档时

。。。

但当我这样做或对col-12应用相同的类时：

<div class="row">
     <div class="col-12">
          <div class="d-flex align-items-baseline">
               <span class="h5">My Games</span>
               <button type="button" class="btn btn-info float-right" v-b-modal.create-game>New Game</button>
          </div>
     </div>
</div>

我的游戏
新游戏

其结果是：

，建议使用flex和align items:baseline到row div。但是，当我这样做时，什么也没有发生

有没有人能告诉我我做错了什么，以及如何纠正？我希望文本放在基线上，并且它们仍然彼此分开

我想让它靠近这一点：

---

谢谢

您需要删除

.h5

的

边距

，然后使用

。对齐项目结束

span.h5{
柔性生长：1；
}

我的游戏
新游戏

您可以添加一些css并查看结果

我的游戏
新游戏

你好，Nidhin，谢谢你的回复！虽然这确实使它达到了基线，但它仍然将按钮和文本挤在一起。有办法解决吗？

它仍然会压扁按钮

请解释一下好吗？你需要一个缺口吗？当然，尼丁。我希望按钮仍然像第一张图片中那样向右浮动，并且仍然与文本间隔很远。我只希望文本与基线对齐，这样文本看起来就不会高于按钮。啊，我忘记了图像1，您可以将

flex-grow:1

添加到

span

中。编辑了mate，请向任何试图解决此问题的人查询。请阅读下面Nidhin的答案并阅读评论。

<div class="row">
     <div class="col-12">
          <div class="d-flex align-items-baseline">
               <span class="h5">My Games</span>
               <button type="button" class="btn btn-info float-right" v-b-modal.create-game>New Game</button>
          </div>
     </div>
</div>