导航栏中的 Bootstrap v5.0 d-flex 不起作用

Question

这里我在 a 和 div 的父标签中给出了 d-flex 和 justify-content-between 类。但我不明白为什么它不能在这里工作..

<nav class="navbar navbar-expand-lg navbar-light bg-light">
          <div class="container d-flex justify-content-between">
            <a class="navbar-brand" href="#">
              <img width="100%" height="50" src="icons/Logo.png">
            </a>
            <div class="collapse navbar-collapse" id="navbarScroll">
              <h1>Right</h2>
            </div>
          </div>
    </nav>

Answer 1

因此，使用您提供的代码，您只需将justify-content: flex-end 添加到.navbar-collapse 部分。

要完成您提供的代码示例，您只需将引导类 justify-content-end 添加到右侧第二个位置，如下所示

<div class="container d-flex justify-content-between">
    <a class="navbar-brand" href="#">
        <img width="100%" height="50" src="icons/Logo.png">
    </a>
    <div class="collapse navbar-collapse justify-content-end" id="navbarScroll">
        <h1>Right</h1>
    </div>
</div>

显示在this codepen