Bootstrap双行导航栏：如何让第二行(#quickMenu)实现全屏宽度？

嘿，我仔细看了你的导航代码和遇到的问题——第二行#quickMenu被品牌Logo挡住，没法延伸到窗口左侧，这确实是因为它被限制在.navbar-collapse这个flex-column容器里了，而这个容器本身是和Logo并排布局的，宽度只能占Logo右侧的剩余空间，自然没法突破。下面给你两个可行的解决方案：

方案一：调整HTML结构，分离#quickMenu #

这个方法是把#quickMenu从.navbar-collapse中移出来，放到<nav>标签内部，和.navbar-collapse同级，这样它就不受Logo的布局限制，可以轻松占满全屏宽度。

修改后的关键HTML结构 #

<nav class="navbar navbar-expand-md fixed-top nav-wrapper">
  <a class="navbar-brand" href="/">
    <img src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-solid.svg" width="80" height="30" alt="">
  </a>
  <button class="navbar-toggler mb-2 mr-2" type="button" data-toggle="collapse" data-target="#navbarCollapse">
    <span class="navbar-toggler-icon">
      <i class="fa fa-bars bg-primary p-2 text-white" style="font-size:28px;"></i>
    </span>
  </button>
  
  <!-- 把#quickMenu移到这里，和navbar-collapse同级 -->
  <div id="quickMenu" class="navbar-nav w-100 d-none d-md-flex flex-row-reverse pr-md-5">
    <div class="nav-item" id="ctaMenu">
      <div class="d-flex">
        <div class="nav-item mr-3">
          <a href='/calendar' title="Calendar" class="text-dark nav-link mb-sm-2 font-weight-bold py-0">
            <i class="fa fa-calendar"></i></a>
        </div>
        <div class="nav-item">
          <a href='#' title="Apply" class="font-weight-bold btn btn-danger px-4 text-uppercase text-white">Apply</a>
        </div>
      </div>
    </div>
    <div class="nav-item mr-2"><a class="nav-link text-dark font-weight-bold" role="link" aria-haspopup="false" href='/linka'>LinkA</a></div>
    <div class="nav-item mr-2"><a class="nav-link text-dark font-weight-bold" role="link" aria-haspopup="false" href='/linkb'>LinkB</a></div>
    <div class="nav-item mr-2"><a class="nav-link text-dark font-weight-bold" role="link" aria-haspopup="false" href='/linkc'>LinkC</a></div>
    <div class="nav-item mr-2"><a class="nav-link text-dark font-weight-bold" role="link" aria-haspopup="false" href='/linkd'>LinkD</a></div>
    <div class="nav-item mr-2"><a class="nav-link text-dark font-weight-bold" role="link" aria-haspopup="false" href='linke'>LinkE</a></div>
  </div>
  
  <div class="collapse navbar-collapse flex-column align-items-start ml-lg-2 ml-0" id="navbarCollapse">
    <!-- 这里只保留mainMenu -->
    <div id="mainMenu" class="navbar-nav w-100 d-flex flex-row-md flex-column-sm mb-md-1 mt-md-0 mb-3 mt-2 border-bottom border-left border-top border-right border-danger">
      <!-- 原mainMenu内容不变 -->
    </div>
    <!-- 移动端折叠菜单里的quickMenu -->
    <div id="mobileQuickMenu" class="d-md-none navbar-nav w-100 flex-column mb-3">
      <!-- 复制原quickMenu的内容，调整为移动端垂直布局 -->
      <div class="nav-item mb-2"><a class="nav-link text-dark font-weight-bold" href='/linka'>LinkA</a></div>
      <div class="nav-item mb-2"><a class="nav-link text-dark font-weight-bold" href='/linkb'>LinkB</a></div>
      <div class="nav-item mb-2"><a class="nav-link text-dark font-weight-bold" href='/linkc'>LinkC</a></div>
      <div class="nav-item mb-2"><a class="nav-link text-dark font-weight-bold" href='/linkd'>LinkD</a></div>
      <div class="nav-item mb-2"><a class="nav-link text-dark font-weight-bold" href='linke'>LinkE</a></div>
      <div class="nav-item">
        <div class="d-flex justify-content-between">
          <a href='/calendar' title="Calendar" class="text-dark nav-link font-weight-bold">
            <i class="fa fa-calendar"></i> Calendar
          </a>
          <a href='#' title="Apply" class="font-weight-bold btn btn-danger px-4 text-uppercase text-white">Apply</a>
        </div>
      </div>
    </div>
  </div>
</nav>

补充响应式CSS #

@media (max-width: 767.98px) {
  #quickMenu.d-md-flex {
    display: none !important;
  }
}

这样大屏时#quickMenu全屏显示，移动端则在折叠菜单里展示适配好的版本。

方案二：用CSS绝对定位突破容器限制 #

如果你不想改动HTML结构，可以用绝对定位让#quickMenu脱离父容器的约束，占满整个窗口宽度：

添加CSS样式 #

.nav-wrapper {
  position: relative; /* 给父容器设置相对定位，作为绝对定位的参考 */
}

#quickMenu {
  position: absolute;
  left: 0;
  right: 0;
  top: 50px; /* 根据你的导航高度调整，避免和Logo、汉堡按钮重叠 */
}

/* 移动端恢复正常布局 */
@media (max-width: 767.98px) {
  #quickMenu {
    position: static;
    top: auto;
  }
}

这个方法不用改HTML，但需要注意调整top值，确保#quickMenu不会和上方元素重叠，同时移动端要恢复静态定位，避免破坏折叠菜单布局。

为什么原来的方法不行？ #

原来的.navbar-collapse是flex-column布局，并且作为.navbar的子元素，和navbar-brand、navbar-toggler处于同一flex容器中，所以它的宽度被限制在Logo右侧的剩余空间——无论你给#quickMenu设置w-100，它的100%宽度都是相对于.navbar-collapse的宽度，而不是整个窗口。

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