1

私のサイトは gitlit.org です。モバイルに移行したり、ブラウザーをスケーリングしたりすると、navbar は問題なくモバイル デザインに切り替わり、3 本の白い線 (メニュー) ボタンをクリックすると機能しますが、[ホーム] をクリックしても何も起こりません。バー全体をクリックできるようにする方法はありますか?

私のnavbarコード:

  <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 です。メインのブートストラップ 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 つの小さな線として動作させたい場合は、次のように aclassと 2 つの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 に答える