如何使navbarCollapse div独立于导航栏图片居中显示？

问题说明 #

导航栏左侧包含两张品牌图片，当前navbarCollapse内的导航内容是相对于整个导航栏（包含图片）居中，需要实现导航内容像没有图片时一样，以页面宽度为基准居中，不受左侧图片宽度影响。

解决方案 #

通过调整Bootstrap的布局类，让左侧图片脱离正常文档流，同时设置导航栏整体居中：

修改后的代码 #

<nav class="navbar navbar-expand-lg bg-white navbar-light sticky-top px-4 px-lg-5 justify-content-center">
  <a href="index.html" class="navbar-brand d-flex align-items-center position-absolute start-0">
    <img class="img-fluid me-1" style="max-height:80px" src="https://gcdnb.pbrd.co/images/uor1HwGTyEGY.jpg" alt="">
    <img class="img-fluid me-1" style="max-height:80px" src="https://gcdnb.pbrd.co/images/2z5kQm8hWV3t.jpg" alt="">
  </a>
  <div id="navbarCollapse" class="collapse navbar-collapse">
    <div class="navbar-nav bg-light pe-4 py-3 py-lg-0">
      <a href="index.html" class="nav-item nav-link active">Welcome</a>
      <a href="about.html" class="nav-item nav-link">About</a>
      <a href="residential.html" class="nav-item nav-link">Residential</a>
      <a href="commercial.html" class="nav-item nav-link">commercial</a>
      <a href="quote.html" class="nav-item nav-link ">Quote</a>
      <a href="contact.html" class="nav-item nav-link">Contact</a>
    </div>
    <div class="h-100 d-lg-inline-flex align-items-center d-none">
      <a class="btn btn-square rounded-circle bg-light text-primary me-2" href="https://www.facebook.com/xxx"><i class="fab fa-facebook-f"></i></a>
    </div>
  </div>
</nav>

关键修改点 #

• 给nav添加justify-content-center：让导航栏的flex容器内容水平居中，此时navbarCollapse会以页面宽度为基准居中。
• 给navbar-brand添加position-absolute start-0：将左侧图片容器绝对定位到导航栏左侧，脱离正常文档流，这样它的宽度不会影响导航栏的居中计算。
• 移除navbar-nav的mx-auto：导航栏已设置整体居中，无需再给导航项单独设置自动边距。

内容的提问来源于stack exchange，提问作者robert trudel