将导航栏与 .container 类一起使用，并在容器外部放置额外的下拉菜单，而无需偏移容器对齐方式

Question

所需的输出：两行，每行都有一个 .container div，在视口中心对齐（并且彼此对齐）。导航栏位于第二行 .container 中。此外，我想在 .container 外部、视口边缘的导航栏行的末尾添加一个非折叠下拉菜单，而不会使容器偏离中心。

当前输出：通过附加下拉菜单，带有导航栏的 .container 被推到左侧，而不是与正上方标题中的 .container 居中。

我这样做是为了向正在切换到 Bootstrap 5 的产品添加自定义标头，并将其内容放入 .container 中。

 |---------视口----------|
 |- | .容器| -|
 |- | .容器| xx|
 |- | .容器| -|
 |- | .容器| -|
 |---------视口----------|

我希望上图中的'xx'不要将相邻容器推到左侧，而是让相邻容器与所有其他容器保持对齐。

这是我尝试过的Codepen 示例我喜欢它的折叠方式，但不喜欢它在全屏上的显示方式。 （我已向两个容器中的每一个添加了垂直的左/右边框线以提高可见性）

<!--Branding area-->

    <div id="branding-area" class="header-branding" class="container-fluid" >
        <div class="container" id="branding-container">
            <div class="row">
                 
                 <div class="col-lg-1 djc-branding-box">
                    <a href="#">
                        <img class="img-responsive mx-auto d-block" src="https://libapps.s3.amazonaws.com/customers/1929/images/blank-logo-1.png">
                    </a>
                </div>
                
                <div class="col-11" style="font-size: 20px; color: #fff; text-align: center;">
                        <div id="header-links" class="pull-right">
                        <ul class="right_bar">
                          <li class="right_bar_item"><a href="#">LINK</a></li>
                            <li class="right_bar_item">·</li>
                          <li class="right_bar_item"><a href="#">LINK</a></li>
                            <li class="right_bar_item">·</li>
                          <li class="right_bar_item"><a href="#">LINK</a></li>
                        </ul>
                        </div>
                </div>
                
            </div>
        </div> 
    </div>
    
    
    
<!-- navbar area -->
    
    <nav id="djc-navbar-area" class="navbar navbar-expand-lg bg-body-tertiary" data-bs-theme="dark">
      <div id="navbar-container" class="container-fluid container">
      
        <a class="navbar-brand" href="#">Local Branch</a>
        
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                About
              </a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
              </ul>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Resources
              </a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
              </ul>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Services
              </a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
              </ul>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Account
              </a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
              </ul>
            </li>
          </ul>
        
        </div>
      
        <div id="hours"  style="color: #fff; font-size: 20px;" class="ms-md-auto ms-sm text-sm-start">
          Today's hours: 9:00 - 5:00
        </div>
         
      </div>
      
      <!-- want this dropdown in the navbar but outside centered .container -->
      <ul  id="djc-help" class="navbar-nav mb-2 mb-lg-0 float-end btn btn-danger">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Help &amp; Chat
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
      
    </nav>
    
    
   

/*show .container l-r boundaries*/
#branding-container {  
  border-left: 1px solid #fff; 
  border-right: 1px solid #fff;
}

#navbar-container{
  border-left: 1px solid #fff; 
  border-right: 1px solid #fff;
}


#branding-area {
    background-color: #CE1126;
    font-size: 20px;
}

#djc-navbar-area {
  background-color:#333;
  border-top: 2px solid #fff;
  color: #fff;
  font-family: ariel, helvitica, verdana;
  font-size: 20px;
}

#djc-navbar-area a
{
  color: #fff;
  font-family: ariel, helvitica, verdana;
  font-size: 20px;
}

#djc-help {border-radius: 0;}

/* space that contains links */
.right_bar {
    float: right;
    font-family: CaeciliaCom-75Bold,cambria,Palatino Linotype,Book Antiqua,Palatino,serif;
    color: #fff;
    font-size: 16px;
    text-align: center;
    padding-top: 10px;
    margin-right: 25px;
    display: inline-block;
    background-color: none;
    color: #fff;
}
.right_bar_item, .right_bar_item a {
    display: inline-block;
    color: #fff;
    margin-left: 10px;
}
.navbar {
    min-height: 50px;
    margin-bottom: 0px;
    border: 1px solid transparent;
  padding: 0; 
}

Answer 1

您需要从文档流中取出“帮助和聊天”菜单才能实现此目的。更改此行：

  <ul  id="djc-help" class="navbar-nav mb-2 mb-lg-0 float-end btn btn-danger">

对此：

  <ul  id="djc-help" class="navbar-nav mb-2 mb-lg-0 position-absolute end-0 btn btn-danger">

就可以了。请注意“帮助和聊天”菜单比导航栏容器高。这是因为它现在位于文档流之外。您可以通过提高导航栏容器或缩短“帮助和聊天”菜单（例如减少顶部和底部填充）来解决此问题。