求助：将Bootstrap 4双行导航栏转换为Bootstrap 5版本

以下是转换完成的Bootstrap 5版本代码，同时修复了原代码中颜色值缺少#的错误，适配了Bootstrap 5的组件类和属性规范：

转换后的HTML代码 #

<nav class="navbar navbar-expand-md">
  <div class="navbar-first-row"></div>
  <div class="container-fluid">
    <!-- 品牌与折叠按钮 -->
    <a class="navbar-brand" href="#"><img src="http://placehold.it/128x50"></a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapse" aria-controls="collapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- 折叠导航内容 -->
    <div class="collapse navbar-collapse" id="collapse">
      <ul class="nav navbar-nav navbar-top-left">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="visually-hidden">(current)</span></a>
        </li>
        <li class="nav-item"><a class="nav-link" href="#">About</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Contact Us</a></li>
      </ul>

      <ul class="nav navbar-nav navbar-bottom-left">
        <li class="nav-item"><a class="nav-link" href="#">1-800-233-1111</a></li>
        <li class="nav-item"><a class="nav-link" href="#">lemo@info.net</a></li>
      </ul>

      <ul class="nav navbar-nav ms-auto navbar-bottom-right">
        <li class="nav-item"><a class="nav-link" href="#">Location</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Login</a></li>
      </ul>

      <ul class="nav navbar-nav ms-auto navbar-top-right">
        <li class="nav-item"><a class="nav-link" href="#">Facebook</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Twitter</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Instagram</a></li>
        <li class="nav-item"><a class="nav-link" href="#">YouTube</a></li>
        <li class="nav-item"><a class="nav-link bg-success" href="#">Call now</a></li>
      </ul>
    </div>
  </div>
</nav>

转换后的CSS代码 #

.navbar-brand {
  padding-top: 0;
}

@media(min-width:768px) {
  .navbar-first-row {
    height:50px;
    background-color:#B5428E;
  }

  .navbar-top-left {
    position:absolute;
    top:0px;
    left:0px;
    background-color:#42B55B;
  }

  .navbar-top-right {
    position:absolute;
    top:0px;
    right:15px;
    background-color:#E82985;
  }
  
  .navbar-bottom-left {
    background-color:#A5B60C;
  }
}

核心改动说明 #

• 组件类替换：移除navbar-default，改用navbar-expand-md控制响应式展开断点；navbar-toggle改为navbar-toggler，图标替换为navbar-toggler-icon
• 属性更新：data-toggle/data-target改为Bootstrap 5的data-bs-toggle/data-bs-target
• 导航项结构：添加nav-item和nav-link类，替换原active标签的结构；sr-only改为visually-hidden
• 右对齐实现：原navbar-right替换为ms-auto（Bootstrap 5的margin-start-auto类）
• CSS修复：为所有颜色值添加#前缀，确保颜色正常显示

内容的提问来源于stack exchange，提问作者sami salaam