Question

我的网站是gitlit.org，当我移动或扩展我的浏览器时，导航栏切换到mobiel设计没有问题，我可以单击三个白线（菜单）按钮，它可以工作但单击Home不做任何事情。有没有办法可以点击整个栏？

我的导航栏代码：

  <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>

这是我的自定义CSS应用于NavBar，我没有编辑主引导程序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

如果我正确理解你的问题......为什么在你的.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>

让我知道这是否是你的意思，如果它对你有用，如果它是这个问题的正确答案，记得要标记它......如果不是让我知道所以我可以修改它是正确的答案：）

BootStrap有移动导航栏整栏下拉菜单

1 个答案: