javascript - BootStrap 有移动导航栏整个栏下拉

Question

我的网站是 gitlit.org，当我使用移动设备或缩放浏览器时，导航栏会毫无问题地切换到 mobiel 设计，我可以单击三个白线(菜单)按钮，它可以工作，但单击“主页”没有任何作用。有没有办法让整个栏都可以点击？

我的导航栏代码:

  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">Home</a>
  <div class="nav-collapse collapse">
    <ul class="nav navbar-nav">
      <li><a href="about.html">About us</a></li>
      <li><a href="#about">resources</a></li>
      <li><a href="sermons.php">sermons</a></li>
      <li><a href="#contact">contact us</a></li>
      <li><a href="#contact">ministries</a></li>
      <li><a href="#contact">blog</a></li>
    </ul>
  </div>
</div>

这是我应用于 NavBar 的自定义 CSS，我没有编辑主 Bootstrap css:

.navbar {
    background-color: #000;
    float: none;
}
.navbar-toggle {
    border: 0px solid #000;
    border-radius: 6px;
}
.navbar-nav > li > a {
    color: white;
    font-size: 13px;
    text-decoration: none;
    text-transform: uppercase;
}
.navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus {
    background-color: #000;
    color: white;
}
.navbar-nav > .active > a:hover {
    color: #fdbb20;
}
.navbar-nav > li > a:hover, .navbar-nav > li > a:focus {
    color: #fdbb20;
}
.navbar-brand {
    color: white;
    font-size: 13px;
    text-decoration: none;
    text-transform: uppercase;
}
.navbar-brand:hover, .navbar-brand:focus {
    color: #fdbb20;
}

Answer 1

如果我没有正确理解您的问题...为什么 home 在您的 .navbar-nav div 之外？

你不应该把它和菜单的其余部分一起移到里面吗？

<div class="nav-collapse collapse">
  <ul class="nav navbar-nav">
    <li><a href="#">Home</a></li>
    <li><a href="about.html">About us</a></li>
    <li><a href="#about">resources</a></li>
    <li><a href="sermons.php">sermons</a></li>
    <li><a href="#contact">contact us</a></li>
    <li><a href="#contact">ministries</a></li>
    <li><a href="#contact">blog</a></li>
  </ul>
</div>

如果你想让它像 3 条小线那样工作，那么你应该添加一个 class 和两个 data- 属性，如下所示:

<a href="#" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">Home</a>
<div class="nav-collapse collapse">
  <ul class="nav navbar-nav">
    <li><a href="about.html">About us</a></li>
    <li><a href="#about">resources</a></li>
    <li><a href="sermons.php">sermons</a></li>
    <li><a href="#contact">contact us</a></li>
    <li><a href="#contact">ministries</a></li>
    <li><a href="#contact">blog</a></li>
  </ul>
</div>

让我知道这是否是您的意思，如果它对您有用，如果它是这个问题的正确答案，请记住标记它...如果不是请告诉我，以便我可以将其修改为正确答案:)