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% 的宽度来覆盖这些链接。

将您的两个徽标<a>标签放入<div class="nav-collapse collapse">

<a>在该 div 之外为您的移动网站添加两个标签，并使用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 回答