Bootstrap 4导航栏下拉菜单不可见问题排查求助

你的下拉菜单明明已经展开却看不到，问题出在自定义Sass里给.navbar加的overflow: hidden属性！

Bootstrap 4的下拉菜单默认采用绝对定位脱离文档流，它会延伸到父容器.navbar的外部。而当你给.navbar设置overflow: hidden时，任何超出这个容器边界的内容都会被直接裁剪隐藏，这就是你只能看到菜单顶部一点点、其余部分完全不可见的核心原因。

修复步骤： #

1. 移除.navbar规则里的overflow: hidden属性
2. 顺便修正两处拼写错误：
   • 把text-align: centre改成text-align: center（CSS只识别美式拼写）
   • 把text-decotation改成text-decoration（属性名拼写错误会导致样式失效）

修改后的Sass代码如下：

body 
  background-color: #ddd; 

#main-container 
  background-color: #fff; 
  margin-top: 10px; 
  border-radius: 20px 20px 0 0; 

.header 
  position: relative; 
  margin: 0 10px 20px 10px; 
  border-bottom: 3px solid #444; 

  h1 
    margin: 0; 

  .navbar 
    /* 移除 overflow: hidden */
    font-family: Arial; 
    position: absolute; 
    right: 0; 
    bottom: 0; 
    padding: 0; 
    background-color: #fff; 

    .navbar-expand-sm .navbar-nav .nav-link 
      color: #444; 
      text-align: center; /* 修正拼写错误 */
      text-decoration: none; /* 修正拼写错误 */
      font-size: 17px; 
      padding: 13px 16px 9px 16px; 
      border-radius: 16px 16px 0 0; 

      &:hover 
        background-color: #444; 
        color: #e5e5e5; 

这样修改后，下拉菜单就能正常展开并显示全部内容啦~

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