1

我的网站是 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>

这是我应用于导航栏的自定义 CSS，我没有编辑主引导 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;
}
4

1 回答 1

1

如果我正确理解您的问题...为什么家在您的.navbar-navdiv 之外？

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

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

让我知道这是否是你的意思，如果它对你有用，如果它是这个问题的正确答案，记得标记它......如果不只是让我知道，那么我可以将其修改为正确答案:)

于 2013-08-09T05:03:38.613 回答