Css 引导导航栏-只能单击<；中图像的填充（？）；a>；标签

我使用Twitter的引导框架创建了一个页面；问题在于导航栏

我有2个徽标，每个图像嵌套在一个锚定标记中。当导航栏折叠时，链接可以正常工作，但是当它展开时（以桌面分辨率），你不能点击图像；查看inspector中的元素，似乎正在发生的事情是，图像不知何故位于锚定标记的“顶部”，因此您可以单击图像周围的填充，但不能单击图像本身

这是我的密码：

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

...

由于这是我的第一篇帖子，我不能发布截图，但你可以看到我在这里谈论的内容：

---

这显然是bootstrap处理resopnsive css时出现的一些奇怪行为的结果，但我已经搜索了一段时间了，还没有找到解决方案。老实说，我有点不知所措。

问题是导航折叠div占用了100%的宽度来覆盖这些链接

将两个徽标

标签扔到

在该div之外为您的移动站点添加两个

标记，并使用类似

mobilebrand

的类来使用相同的css。我建议你也把它们做小一点

然后添加以下css，使其在桌面大小时消失：

@media (min-width:980px) {
  .mobile-brand {
    display:none;
  }
}

---

问题是导航折叠分区占用了100%的宽度，覆盖了这些链路

将两个徽标

标签扔到

在该div之外为您的移动站点添加两个

标记，并使用类似

mobilebrand

的类来使用相同的css。我建议你也把它们做小一点

然后添加以下css，使其在桌面大小时消失：

@media (min-width:980px) {
  .mobile-brand {
    display:none;
  }
}

---

只需添加.customNav a.navbar-brand{position:relative；z-index:9；}即可解决您的问题。

只需添加.customNav a.navbar-brand{position:relative；z-index:9；}即可解决您的问题。

效果非常好！这正是正在发生的事情。它无法正确处理图像似乎是一个bug，因为您应该能够向导航栏的徽标区域添加文本，并使其完全可点击。谢谢亚历山大，这很有效！这正是正在发生的事情。它无法正确处理图像似乎是一个bug，因为您应该能够向导航栏的徽标区域添加文本，并使其完全可点击。谢谢你，亚历山大。