css - Bootstrap 导航栏 - 只能单击 <a> 标签内图像的填充(？)

Question

我已经使用 Twitter 的 Bootstrap 框架创建了一个页面；问题出在导航栏上。

我有 2 个 Logo ，每个图像都嵌套在 anchor 标记中。当导航栏折叠时，链接工作正常，但当它展开时(在桌面分辨率下)，您无法点击图像；查看检查器中的元素，似乎发生的事情是图像以某种方式位于 anchor 标记的“顶部”，因此您可以单击图像周围的填充，但不能单击图像本身。

这是我的代码:

    <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

这显然是 bootstrap 处理响应式 css 的方式的一些奇怪行为的结果，但我已经搜索了一段时间，但还没有找到解决方案。老实说，我有点难过。

Answer 1

问题是 nav-collapse div 占据了 100% 的宽度，覆盖了这些链接。

抛出你的两个标志<a> <div class="nav-collapse collapse"> 内的标签

添加两个<a>在该 div 之外为您的移动网站添加标签，并使用类似 mobile-brand 的类使用相同的CSS。我建议您也将它们缩小一点。

然后添加以下 css 使它们在您处于桌面大小时消失:

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