如何在引导程序导航栏中对齐元素

Question

我是引导程序的新手如何将注销链接与图片和文本放在同一行 谢谢

<nav class="navbar navbar-dark bg-dark justify-content-between">
        <h4 class="navbar-brand">
          Hello {{std_name}} Your rate is: {{std_rate}}
          <img src="{% static 'images/star.png' %}" />
        </h4>
        <a href="" class="mr-sm-2" style="color: white">logout</a>
</nav>

Answer 1

您需要在 align-items-center 中添加 nav 类以使其垂直居中。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-dark bg-dark justify-content-between align-items-center">
  <h4 class="navbar-brand">
    Hello {{std_name}} Your rate is: {{std_rate}}
    <img src="{% static 'images/star.png' %}" />
  </h4>
  <a href="" class="mr-sm-2" style="color: white">logout</a>
</nav>