html - Bootstrap Navbar 溢出并在 overflow hidden 时断开链接

Question

我有一个在移动设备上溢出的 Bootstrap 导航栏，当我将我的 css 设置为 overflow hidden 时，按钮链接断开。我完全不知所措。这是我的导航栏代码。这是 site. 的链接如果有人有机会提供帮助，我会很高兴。

HTML

<nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button id="btnCollapse" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
          <h1 class="navbar-brand">Goode Development</h1>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav navbar-left">
            <li><a class="a" href="#homey">Home</a></li>
            <li><a class="a" href="#porty">Portfolio</a></li>
            <li><a class="a" href="#abouty">About</a></li>
            <li><a class="a" href="#conty">Contact</a></li>
          </ul>
        </div>
      </div>

    </nav>

CSS

.navbar {
  height: 125px;
background-color:#0d0d0d !important;
}

.navbar-brand {
  position: relative!important;
  left: 45px!important;
  bottom: 10px!important;
  font-size: 4em!important;
  color: white!important;
  font-family: "Montserrat", sans-serif !important;
  white-space:nowrap;
}

.nav.navbar-nav.navbar-left li a {
  color: white;
  position: relative;
  right: 475px;
  top: 66px;
  font-family: "Montserrat", sans-serif !important;
}

.nav.navbar-nav.navbar-left li a:hover {
  color: orange;
}

#myNavbar {
    background-color: #0d0d0d ;
}

@media screen and (max-width: 990px) {
  .navbar-header {
    float: none !important;
  }
  .navbar-brand {
    left: 0 !important;
  }
  .nav li a {
    padding: 5px;
    margin-right: 50px;
  }
  .nav.navbar-nav.navbar-left li a {
    color: white;
    right: 0px;
    top: 0px;
  }
}

@media screen and (max-width: 767px) {
  .navbar-brand {
    font-size: 40px !important;
    position: relative !important;
    top: -20px !important;
    left: -10px !important;
  }
  .navbar {
    height: 70px;
  }
  .nav.navbar-nav.navbar-left li a {
    color: #0d0d0d;
    right: 0;
    top: 0;
  }
  .navbar-collapse{
  overflow-x:hidden;
}
  .collapsing,
  .in {
    background-color: #222222;
    position: relative;
    top: -30px;
  }
  .collapsing ul li a,
  .in ul li a {
    color: white!important;
  }
  .collapsing ul li a:hover,
  .in ul li a:hover {
    color: orange!important;
  }
}

Answer 1

您需要调整您的视口(viewport)元标记以实现完美的响应式显示。

您目前拥有:

<meta name="viewport" content="width=device-width, initial-scale=1">

向元标记添加最小、最大比例和用户可伸缩性将解决您的问题。

试试这个:

<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0,width=device-width" />