html - 在段落内完美对齐 Bootstrap 徽章

Question

在下图中，您可以看到添加徽章会导致徽章上方的间距大于下方的间距。 Bootstrap 4 代码是干净的，没有掺假，所以不幸的是这不是开箱即用的。我试着弄乱边距和行高，但一个小时后我放弃了。

<nav class="bg-dark text-white py-1 sticky-top">
  <div class="container">
    <p class="text-center w-100 mb-0">
      <b>
        <a class="link-unstyled" target="_blank" href="#">
          Find nearby hearing aid deals
        </a>
      </b>
      <span class="badge badge-success">
        New
      </span>
    </p>
  </div>
</nav>

我有以下 fiddle 来说明问题。

https://jsfiddle.net/funkdified/t4xdhuo7/2/

Answer 1

你只需要将 .justify-content-center 和 .align-items-center 添加到 .row 元素中，然后将完美对齐并在内部居中。

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

<nav class="bg-dark text-white py-1 sticky-top">
  <div class="container">
    <div class="row w-100 mb-0 justify-content-center align-items-center">
      <b>
        <a class="link-unstyled" target="_blank" href="https://www.hearingtracker.com/hearing-aids/deals">
          Find nearby hearing aid deals
        </a>
      </b>
      <span class="badge badge-success ml-1">
        New
      </span>
    </div>
  </div>
</nav>