0

Twitter の Bootstrap フレームワークを使用してページを作成しました。問題はナビゲーションバーにあります。

2 つのロゴがあり、各画像はアンカー タグにネストされています。ナビゲーション バーが折りたたまれている場合、リンクは正常に機能しますが、(デスクトップの解像度で) 展開されている場合、画像をクリックすることはできません。インスペクターの要素を見ると、画像がアンカータグの「上」にあるように見えるため、画像の周りのパディングをクリックできますが、画像自体はクリックできません。

これが私のコードです：

    <div class="navbar navbar-inverse navbar-static-top">
      <div class="navbar-inner">
        <div class="container">

      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

      <!-- Be sure to leave the brand out there if you want it shown -->
      <a class="brand" style="padding:0px;" href="<?=getRequestProtocol()?>://<? echo curHost(); ?>"><img src="/images/HailStrikeGraphics/hs_header_logo_black.png" width="190px" /></a>
      <a class="brand" style="padding:0px;" href="http://www.stormdamagecenter.org"><img src="/images/nsdc_coin.png" /></a>
        <!-- Everything you want hidden at 940px or less, place within here -->
        <div class="nav-collapse collapse">
         <div class="nav-inner-wrapper">

           ...

         </div>
        </div>

       </div>
      </div>
     </div>

これは私の最初の投稿なので、スクリーンショットを投稿することはできませんが、ここで私が話していることを確認できます: hailstrike.com

これは明らかに、ブートストラップがレスポンシブ css を処理する方法に関するいくつかの奇妙な動作の結果ですが、私はしばらくの間ボードを精査してきましたが、これに対する解決策は見つかりませんでした。正直なところ、私は少し困惑しています。

4

2 に答える 2

5

問題は、nav-collapse div が幅の 100% を占めてこれらのリンクをカバーしていることです。

2 つのロゴ<a>タグを<div class="nav-collapse collapse">

<a>その div の外にモバイル サイト用の2 つのタグを追加mobile-brandし、同じ css でのようなクラスを使用します。もう少し小さくすることもお勧めします。

次に、次の css を追加して、デスクトップ サイズになったときにそれらを非表示にします。

@media (min-width:980px) {
  .mobile-brand {
    display:none;
  }
}
于 2013-07-12T19:45:40.300 に答える
1

.customNav a.navbar-brand{position:relative;z-index:9;} を追加するだけで問題が解決します。

于 2014-12-22T05:08:11.050 に答える