Bootstrap 5 flex-grow-0 无法正常工作

Question

这是我的导航栏代码 sn-p。

<nav class="navbar navbar-expand-md fixed-top bg-white">
  <div class="container my-2">
    <a href="/" class="navbar-brand text-dark fw-bold">
      Rakshit Deshmukh
    </a>
    <button class="btn btn-outline-info ml-auto">Contact me</button>
    <button
      class="navbar-toggler"
      data-toggle="collapse"
      data-target="#collapseNav"
    >
      <span class="fas fa-bars text-dark"></span>
    </button>

    <div class="collapse navbar-collapse flex-grow-0" id="collapseNav">
      <div class="navbar-nav">
        <a href="#" class="nav-item nav-link text-dark h6 mx-3 my-auto">
          Blogs
        </a>
      </div>
    </div>
  </div>
</nav>
<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
  crossorigin="anonymous"
/>
<script
  src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
  integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN"
  crossorigin="anonymous"
></script>
<script
  src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js"
  integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/"
  crossorigin="anonymous"
></script>

这是当前代码生成的输出导航栏：

这是我想要生成的导航栏：

是CDN的问题吗？

碰巧，对于这个项目，我从以前的 Bootstrap 4 迁移到了 Bootstrap 5，因此这些问题正在上升。

Answer 1

这不是因为flex-grow-0 发生了变化。这是因为ml-auto 现在是ms-auto...

<nav class="navbar navbar-expand-md fixed-top bg-white">
    <div class="container my-2">
        <a href="/" class="navbar-brand text-dark fw-bold"> Rakshit Deshmukh </a>
        <button class="btn btn-outline-info ms-auto">Contact me</button>
        <button class="navbar-toggler" data-toggle="collapse" data-target="#collapseNav">
            <span class="fas fa-bars text-dark"></span>
        </button>
        <div class="collapse navbar-collapse flex-grow-0" id="collapseNav">
            <div class="navbar-nav">
                <a href="#" class="nav-item nav-link text-dark h6 mx-3 my-auto"> Blogs </a>
            </div>
        </div>
    </div>
</nav>

https://codeply.com/p/i9uVTwK3tf

Bootstrap 5 现在支持 RTL，因此“left”和“right”的正确概念已更改为“start”和“结束”。因此，ml-auto 现在是 ms-auto。

另见：Bootstrap align navbar items to the right