Bootstrap3 移动端navbar collapse列表被其他元素覆盖问题求助

制作单页网站时，遇到Bootstrap3的navbar折叠列表在移动端视图中显示在其他元素下方的问题。尝试设置列表及后续元素的position为relative、调整透明度并添加背景，均未解决。作业要求navbar不能固定在顶部，需实现折叠列表不覆盖其他元素的效果。

以下是针对问题的具体修改方案：

• 移除#header-nav的固定高度设置：固定高度会限制导航栏展开时的空间，导致折叠菜单被挤压到下方
• 删除移动端媒体查询中.navbar .navbar-nav的height:100vh属性：该设置会让导航列表高度占满视口，破坏正常布局
• 调整.navbar-collapse的样式，确保它在导航栏内部正确展开

修改后的CSS代码 #

* {
  box-sizing: border-box;
  font-family: Bradley Hand, cursive;
  font-size: 24px; 
}

p {margin:0}
/*  Header */
#header-nav {
  background-color: rgb(125, 125, 125);
  border-radius: 0;
  border:#000000 solid 3px;
  position: relative;
  /* 移除固定height */
}

.navbar-brand {
  padding-top: 25px;
}
.navbar-brand h1 {
  color: #000000;
  font-size: 2em;
  font-weight: bold;
  text-shadow: 1px 2px 1px #515151;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 15px;
}
.navbar-brand a:hover, .navbar-brand a:focus {
  text-decoration: none;
  background: #acacac;
}
#nav-list {
  margin-top: 10px;
}

#nav-list a {
  background-color: #fff;
  border: 4px #000;
  font: #000;
  text-align: center;
}
#navbar-collapse > #nav-list > li > a:hover {
  background: #acacac;
}
.navbar-header button.navbar-toggle, .navbar-header .icon-bar {
  border: 2px solid #000000;
}
.navbar-header button.navbar-toggle {
  clear: both;
  margin-top: -53px;
}
.nav>li>a {
  display:none;
}
/* end Header */

#Menu{
  font-size:3em;
  font-weight: bold;
  background-color: #fff;
  color:#000000;
  margin-top: 30px;
  margin-bottom: 30px;
}

div > .row{
margin: 15px;
color: #000000;
}
.itm, .cntnt{
  background-color: #acacac;
  margin-right: 15px;
  margin-left: 15px;
  padding: 15px;
}

.itm{
  font-weight: bold;
  font-size: 1.5em;
}
.cntnt {
  font-size: 1.1em;
  margin-bottom: 15px;
}
/* Medium devices */
@media (min-width: 992px) and (max-width: 1199px) {


}

/* Small devices */
@media (min-width: 768px) and (max-width: 991px) {
 

}

/* Extra small devices */
@media (max-width: 767px) {
  /* Header */
  .navbar-brand {
    padding-top: 10px;
    height: 80px;
  }
  .navbar-brand h1 { 
    padding-top: 10px;
    font-size: 7vw;
  }
  /* 移除height:100vh */
  .navbar .navbar-nav {
    margin-top: 40px;
  }

 div > .navbar-collapse{
  border: hidden;
  max-height: 175px;  
 }

  #navbar-collapse > #nav-list > li{
    border: #000 solid 2px;
  }
  #navbar-collapse > #nav-list > li > a {
    color: #000;
    display:block;
    font-size: 4vw;
  }

  /* End Header */
  #Menu{
    font-size:5vw;
  }
  div > .row{
    margin: 2%;
  }
  .itm{
    font-size: 3vw;
  }
  .cntnt {
    font-size: 2vw;
  }

}

修改说明 #

1. 移除#header-nav的height:100px：让导航栏可以根据内部内容自动调整高度，折叠菜单展开时不会被固定高度限制
2. 删除.navbar .navbar-nav的height:100vh：避免导航列表占满整个视口，导致下方内容被遮挡
3. 保留其他原有样式，确保移动端菜单的背景和边框样式正常显示

内容的提问来源于stack exchange，提问作者Рим