bootstrap 中的移动导航栏无法使用

Question

我已经盯着我的屏幕好几个小时了，却一无所获，为什么我希望你们中的一些人知道如何解决我的问题。在较小的屏幕尺寸（移动设备）上时，导航栏无法正确展开。也许我确实在“ul”“li”中修改了很多，我不确定。

点击导航按钮时，它会从“折叠”变为“折叠显示”。

HTML:

<!-- Nav -->
<nav id="navbar" class="navbar navbar-expand-lg top-navbar" data-toggle="sticky-onscroll"> <a class="navbar-brand" href="https://biogenity.com"><img alt="Biogenity" title="Home" src="#" class="img-fluid" style="max-width: 9em;"></a>
    <button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"> </span> </button>
    <p class="d-none d-sm-none d-md-none d-lg-none d-xl-block" style="margin-top: 1em; margin-left: 2em;"><i class="fas fa-1x fa-mobile-alt" style="margin-right: 10px;"></i> +45 71116050 <!--<i class="fas fa-1x fa-envelope" style="margin-left: 20px; margin-right: 10px;"></i> info@biogenity.com--></p>
    
    <!-- Nav Menu -->
    <div class="collapse navbar-collapse flex-column ml-lg-0 ml-3 ml-auto" id="navbarSupportedContent" style="width: 600px important!">
      <ul class="ml-auto" style="font-size: 1.2em; text-align: right">
        <li class="dropdown"><a href="/proteomics"><span>Proteomics</span> <i class="bi"></i></a>
          <ul class="ul-a">
            <li><a style="font-size: 0.75em; font-weight: bold; text-align: left; color: #082A40;text-decoration-thickness: 2px;">Sample types</a></li>
            <li><a href="#">Cell</a></li>
            <li><a href="#">Tissue</a></li>
            <li><a href="#">Laser micrrodissection</a></li>
            <li><a href="#">Single cell</a></li>
            <li><a href="#">Extra celullar vesiclesa</a></li>
            <li><a href="#">Immuno dissipation</a></li>
            <li><a href="#">Secretome</a></li>
            <li><a href="#">Fermentation products</a></li>
            <li><a href="#">Biological fluid</a></li>
            <li><a href="#">Gel bands</a></li>
            <br>
            <br>
            <br>
            <br>
            <li style="border-top: 2px solid #dfdfdf;margin: 5px 20px 10px 20px;"></li>
            <li><a style="font-size: 0.85em; font-weight: bold; text-align: left; color: #1DA76E;padding-bottom: 0px;">We are happy to assist</a></li>
            <li style="padding-top: 0px;"><a href="#contact" title="Contact" style="font-weight:; font-size: 0.85em; text-align: left;">Contact us here.</a></li>
            <li style="break-before: column;"><a style="font-size: 0.75em; font-weight: bold; text-align: left; color: #082A40;text-decoration-thickness: 2px;">Types</a></li>
            <li><a href="#">Discovery</a></li>
            <li><a href="#">Degradomics</a></li>
            <li><a href="#">Interactomics</a></li>
            <li><a href="#">Immunopeptidomics</a></li>
            <br>
            <li><a style="font-size: 0.75em; font-weight: bold; text-align: left; color: #082A40;text-decoration-thickness: 2px;">Post translational modifications</a></li>
            <li><a href="#">Phosphoproteomics</a></li>
            <li><a href="#">N-Glycan</a></li>
            <li><a href="#">Acelylation</a></li>
            <br>
            <li><a style="font-size: 0.75em; font-weight: bold; text-align: left; color: #082A40;style="text-decoration-thickness: 2px;">Organisms</a></li>
            <li><a href="#">Animals</a></li>
            <li><a href="#">Fungi</a></li>
            <li><a href="#">Bacteria</a></li>
            <li><a href="#">Plants</a></li>
            <li><a href="#">Tanycytes</a></li>
            <li><a href="#">Virus</a></li>
            <br>
          </ul>
        </li>
        <li class="dropdown"><a href="/metabolomics"><span>Metabolomics</span> <i class="bi"></i></a>
          <ul>
            <li><a href="#">Cell</a></li>
          </ul>
        </li>
        <li class="dropdown"><a href="/transcriptomics"><span>Transcriptomics</span> <i class="bi"></i></a>
          <ul>
            <li><a href="#">Phosphoproteomics</a></li>
          </ul>
        </li>
        <li><a class="nav-link scrollto" href="/multi-omics">Multi-omics</a></li>
        <li><a class="nav-link scrollto" href="#team">About</a></li>
        <li style="padding-right: 30px;"><a class="nav-link scrollto" href="#contact">Contact</a></li>
      </ul>
      <i class="bi bi-list mobile-nav-toggle"></i> </div>
</nav>

CSS:

.navbar li {
  position: relative;
}
.navbar ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
}
.navbar a, .navbar a:focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0px 10px 30px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  transition: 0.3s;
}
.navbar a i, .navbar a:focus i {
  font-size: 12px;
  line-height: 0;
  margin-left: 5px;
}
.navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover > a {
  color: #449ED6;
}
.navbar .getstarted, .navbar .getstarted:focus {
  padding: 8px 20px;
  margin-left: 30px;
  border-radius: 50px;
  color: #fff;
  font-size: 14px;
  border: 2px solid #FFF;
  font-weight: 600;
  background-color: #0D4263;
}
.navbar .getstarted:hover, .navbar .getstarted:focus:hover {
  color: #fff;
  background: #1DA76E;
}
.navbar .dropdown ul {
  display: block;
  position: absolute;
  left: 14px;
  top: calc(100% + 30px);
  margin: 0;
  padding: 10px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: 0.3s;
  border-radius: 4px;
}
.navbar .dropdown ul li {
  min-width: 200px;
}
.navbar .dropdown ul a {
  padding: 5px 20px;
  font-size: 14px;
  text-transform: none;
  font-weight: 500;
  color: #082A40;
}
.navbar .dropdown ul a i {
  font-size: 12px;
}
.navbar .dropdown ul a:hover, .navbar .dropdown ul .active:hover, .navbar .dropdown ul li:hover > a {
  color: #449ED6;
}
.navbar .dropdown:hover > ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}
.navbar .dropdown .dropdown ul {
  top: 0;
  left: calc(100% - 30px);
  visibility: hidden;
}
.navbar .dropdown .dropdown:hover > ul {
  opacity: 1;
  top: 0;
  left: 100%;
  visibility: visible;
}
@media (max-width: 1366px) {
  .navbar .dropdown .dropdown ul {
    left: -90%;
  }
  .navbar .dropdown .dropdown:hover > ul {
    left: -100%;
  }
}
/**
* Mobile Navigation 
*/
.mobile-nav-toggle {
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  display: none;
  line-height: 0;
  transition: 0.5s;
}
.mobile-nav-toggle.bi-x {
  color: #fff;
}
@media (max-width: 991px) {
  .mobile-nav-toggle {
    display: block;
  }
  .navbar ul {
    display: none;
  }
}
.navbar-mobile {
  position: fixed;
  overflow: hidden;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(40, 58, 90, 0.9);
  transition: 0.3s;
  z-index: 999;
}
.navbar-mobile .mobile-nav-toggle {
  position: absolute;
  top: 15px;
  right: 15px;
}
.navbar-mobile ul {
  display: block;
  position: absolute;
  top: 55px;
  right: 15px;
  bottom: 15px;
  left: 15px;
  padding: 10px 0;
  border-radius: 10px;
  background-color: #fff;
  overflow-y: auto;
  transition: 0.3s;
}
.navbar-mobile a, .navbar-mobile a:focus {
  padding: 10px 20px;
  font-size: 15px;
  color: #082A40;
}
.navbar-mobile a:hover, .navbar-mobile .active, .navbar-mobile li:hover > a {
  color: #449ED6;
}
.navbar-mobile .getstarted, .navbar-mobile .getstarted:focus {
  margin: 15px;
  color: #082A40;
}
.navbar-mobile .dropdown ul {
  position: static;
  display: none;
  margin: 10px 20px;
  padding: 10px 0;
  z-index: 99;
  opacity: 1;
  visibility: visible;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}
.navbar-mobile .dropdown ul li {
  min-width: 200px;
}
.navbar-mobile .dropdown ul a {
  padding: 10px 20px;
}
.navbar-mobile .dropdown ul a i {
  font-size: 12px;
}
.navbar-mobile .dropdown ul a:hover, .navbar-mobile .dropdown ul .active:hover, .navbar-mobile .dropdown ul li:hover > a {
  color: #47b2e4;
}
.navbar-mobile .dropdown > .dropdown-active {
  display: block;
}
.nav-a a:hover, .nav-a .active, .nav-a .active:focus, .nav-a li:hover > a {
  color: #1DA76E;
}

@media (min-width: 992px) {
  .ul-a {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
  } 
}

谢谢。

Answer 1

@media (max-width: 991px) {
  .navbar-collapse >  ul {
      display: block;
  }
}

将此 css 放入第 435 行的 main.css 中。

Answer 2

单击汉堡菜单“显示”后，class 被添加到 ul 元素，但 ul 元素的样式与显示相同 none，添加 CSS 以显示隐藏的单击菜单图标上的元素，尝试以下 CSS

@media(max-width:991px) 
{   
.collapse.show ul {
        display:block
    }
}

bootstrap 中的移动导航栏无法使用

The navbar in bootstrap for mobile doesn't work

html

css

nav

bootstrap-4