Bootstrap 4导航栏中等宽度下下拉菜单超出容器问题求助

云上老周

2026-8-6

导航栏下拉菜单在中间宽度阶段溢出容器的问题

我是新手，对相关技术术语不太熟悉。原本导航栏运行正常，但现在出现异常：页面完全收窄或完全展开时均正常，但在中间的几个宽度阶段，navbar的下拉菜单会超出容器向右溢出。我未修改Dreamweaver预设的@media参数，还曾尝试让导航栏居中，之前实现过但现在失效了，且代码写法与Bootstrap官方示例不同，我不想重写代码。

问题截图：
导航栏下拉菜单溢出

相关代码

CSS代码

.nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.nav-link {
  color: #FFCC00!important;
  display: block;
  padding: 0.5rem 1rem;
}
.nav-link:hover, .nav-link:focus {
    color: #33ccff!important;
  text-decoration: none;
}
.nav-link.disabled {
  color: #6c757d;
  pointer-events: none;
  cursor: default;
}
.nav-tabs {
  border-bottom: 1px solid #dee2e6;
}
.nav-tabs .nav-item {
  margin-bottom: -1px;
}
.nav-tabs .nav-link {
  border: 1px solid transparent;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
  border-color: #e9ecef #e9ecef #dee2e6;
}
.nav-tabs .nav-link.disabled {
  color: #6c757d;
  background-color: transparent;
  border-color: transparent;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: #495057;
  background-color: #fff;
  border-color: #dee2e6 #dee2e6 #fff;
}
.nav-tabs .dropdown-menu {
  margin-top: -1px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.nav-pills .nav-link {
  border-radius: 0.25rem;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #fff;
  background-color: #007bff;
}
.nav-fill .nav-item {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  text-align: center;
}
.nav-justified .nav-item {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  text-align: center;
}
.tab-content > .tab-pane {
  display: none;
}
.tab-content > .active {
  display: block;
}
.navbar {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0.5rem 1rem;
}
.navbar .container,
.navbar .container-fluid, .navbar .container-sm, .navbar .container-md, .navbar .container-lg, .navbar .container-xl {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.navbar-custom {
    background-color: #0a0a0a;
}
/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
    color: rgba(243, 203, 4, 1);
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
    color: rgba(255,255,255,.5);
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
    color: #33ccff;
}
.navbar-brand {
  display: inline-block;
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
  margin-right: 1rem;
  font-size: 1.25rem;
  line-height: inherit;
  white-space: nowrap;
}
.navbar-brand:hover, .navbar-brand:focus {
  text-decoration: none;
}
.navbar-nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.navbar-nav .nav-link {
  padding-right: 0;
  padding-left: 0;
}
.navbar-nav .dropdown-menu {
  position: static;
  float: none;
}
.navbar-text {
  display: inline-block;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.navbar-collapse {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-align: center;
  align-items: center;
}
.custom-toggler .navbar-toggler {
   color: rgba(255, 255, 255, 0.5);
   border-color: #f3cb06;
   background-color: #0A0A0A;
    text-align: center
} 
.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(243,203,6,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
/*change toggler color*/
.custom-toggler.navbar-toggler {
    border-color: #ffcc00;
    text-align: center;
}
    
/*end change toggler color but I need to change the toggler bg color*/
.navbar-toggler {
  padding: 0.25rem 0.75rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}
.navbar-toggler:hover, .navbar-toggler:focus {
  text-decoration: none;
}
.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  content: "";
  background: no-repeat center center;
  background-size: 100% 100%;
}

HTML代码

<div class="container-align align-content-center">
      
      <div class="container align-content-center"><img src="images/CDBanner.png" alt="" width="100%" class="img-fluid" lass="img-fluid"/></div>
<div class="container-fluid">
      <div class="container-fluid">
    
    <div class="container">
    
    <nav class="navbar navbar-expand-sm bg-custom navbar-custom">
    
    
    
  <nav class="navbar navbar-expand-lg custom-toggler" style="background-color: rgb(10, 10, 10);">  
    
    
    
    <button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
    
    <div class="collapse navbar-collapse" id="navbarSupportedContent1">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active"> <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a> </li>
        
        <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Posters</a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown1"> <a class="dropdown-item" href="#">QI Posters</a> <a class="dropdown-item" href="#">Case Studies Posters</a>
            
          </div>
        </li>
        <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Booklets &amp;&amp;nbsp; Brochures</a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown1"><a class="dropdown-item" href="#">Booklets</a>
            <a class="dropdown-item" href="#">Brochures</a></div>
        </li>
        <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Logos &amp; Illustrative</a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown1"> <a class="dropdown-item" href="#">Logos</a> <a class="dropdown-item" href="#">Illustrative</a>
          </div>
        </li>
        <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown4" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Motion</a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown1"> <a class="dropdown-item" href="#">Motion 1</a> <a class="dropdown-item" href="#">Motion 2</a>
            
            <a class="dropdown-item" href="#">Motion 3</a>
            <a class="dropdown-item" href="#">Motion 4</a></div>
        </li>
        <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown5" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Social Media</a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown1"> <a class="dropdown-item" href="#">Before &amp; After Ads</a> <a class="dropdown-item" href="#">FaceBook &amp; Instragram</a>
            <a class="dropdown-item" href="#">YouTube Thumbnails</a></div>
        </li>
        <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown6" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Other&amp;nbsp; </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown1"> <a class="dropdown-item" href="#">Other</a> <a class="dropdown-item" href="#">Web Site and UI</a>
            <a class="dropdown-item" href="#">T-Shirts</a></div>
        </li>
        <li class="nav-item"> </li>
      </ul>
    </div>
  </nav>
    </div>

解决方案

1. 修复下拉菜单溢出

下拉菜单在中等宽度下向右溢出，是因为默认定位没有适配容器边界。修改.navbar-nav .dropdown-menu的样式，让它从右侧对齐：

.navbar-nav .dropdown-menu {
  position: static;
  float: none;
  right: 0;
  left: auto;
}

如果需要限制菜单宽度避免横向溢出，再添加：

.navbar-nav .dropdown-menu {
  max-width: 100%;
  overflow-x: hidden;
}

2. 恢复导航栏居中

导航栏居中失效是因为嵌套了两层nav.navbar，导致布局层级冲突。可以给包裹导航的.container添加居中样式：

.container > .navbar {
  margin: 0 auto;
}

或者直接修改内层导航的布局方式：

.navbar.custom-toggler {
  justify-content: center;
}

3. 清理冗余HTML结构

你的HTML里嵌套了两层nav.navbar，这会引发样式和布局冲突，建议删除外层的<nav class="navbar navbar-expand-sm bg-custom navbar-custom">，只保留内层的导航结构，减少不必要的层级干扰。

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

Bootstrap 4导航栏中等宽度下下拉菜单超出容器问题求助

相关代码 #

CSS代码 #

HTML代码 #

解决方案 #

1. 修复下拉菜单溢出 #

2. 恢复导航栏居中 #

3. 清理冗余HTML结构 #