引导程序：将内容与基线对齐

Question

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

Animal === fido

哪个产生了：

查阅引导文档时，it says to do this:

<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="d-flex align-items-baseline">...</div>

它导致以下结果：

I looked at this post，它向行div建议使用flex和align-items：baseline。但是，当我这样做时，什么也没发生。

有人可以建议我做错了什么以及如何解决？我希望将文本放置在基线上，并让它们仍然彼此分开。

我希望它看起来像这样：

谢谢！

Answer 1

您需要删除margin的{​​{1}}并使用.h5

.align-items-end

span.h5 {
  flex-grow: 1;
}

Answer 2

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

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="row" style="margin: 0px;">
     <div class="col-12" style="display: inline-block;width: 100%;background-color: #efefef;padding: 15px;">
          <span class="h5" style="margin: 10px 0 0 0;display: inline-block;">My Games</span>
          <button type="button" class="btn btn-info float-right" v-b-modal.create-game>New Game</button>
     </div>
</div>