Question

我有使用Bootstrap 3.3.5创建的导航栏，左边是navbar-brand锚元素：这里是codepen with the code，这里是full page view。

问题如下：

这个链接元素<a href='#' class='navbar-brand'>Symphony</a>被渲染，我可以看到它，但它的行为，就像什么都没有。我无法点击链接，我甚至无法选择里面的文字。

关于实际问题可能是什么的任何想法？是否有可能某些CSS以某种方式隐式地断开链接或jQuery代码做错了什么？

更新

如果我的样式表：

，我已尝试在最后添加此内容

a.navbar-brand {
  z-index: 0/-9999/9999 !important;
}

Answer 1

将以下代码添加到.navbar-brand并查看。

position: relative;
z-index: 1;

这是因为此元素与.nav-bar重叠。如果你增加z-index它会正常工作，为此，我们应该将该元素的position: static更改为其他位置值。在您的情况下，position: relative将有效。

Answer 2

Masoom的回答是正确的

如果您不想更改css，请更改此位置 <a href='#' class='navbar-brand'>Symphony</a>喜欢这个

<div class="main-navbar">
<nav class="navbar navbar-default">
<div class="navbar-header">
    <button class="navbar-toggle" type="button" data-toggle="collapse"    data-target="js-navbar-collapse"> 
     <span class="sr-only">Toggle navigation</span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
   </button>

</div>


<!--"Browse the Store" DROPDOWN -->
<div class="collapse navbar-collapse js-navbar-collapse">

  <ul class="nav navbar-nav">

    <a href="https://google.com" class="navbar-brand">Symphony</a>

    <li class="dropdown mega-dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Browse The Store<span class="glyphicon glyphicon-chevron-down"></span></a>
      <ul class="dropdown-menu mega-dropdown-menu row">
        <li class="col-sm-3">
          <ul>
            <li class="dropdown-header">New in Symphony</li>
            <div id="myCarousel" class="carousel slide" data-ride="carousel">
              <div class="carousel-inner">
              </div>
              <!-- End Carousel Inner -->
            </div>
            <!-- /.carousel -->
            <li class="divider"></li>
            <li><a href="#">View all Instruments <span class="glyphicon glyphicon-chevron-right pull-right"></span></a></li>
          </ul>
        </li>
        <li class="col-sm-3">
          <ul>
            <li class="dropdown-header">Violins</li>
            <li class="divider"></li>
            <li class="dropdown-header">Pianos</li>
          </ul>
        </li>
        <li class="col-sm-3">
          <ul>
            <li class="dropdown-header">Guitars</li>
            <li class="divider"></li>
            <li class="dropdown-header">Saxophones</li>
          </ul>
        </li>
        <li class="col-sm-3">
          <ul>
            <li class="dropdown-header">Support</li>
            <li><a href="#">About</a></li>
            <li><a href="#">Delivery Info</a></li>
            <li><a href="#">FAQ &amp; Help</a></li>
            <li><a href="#">Contacts</a></li>
            <li class="divider"></li>
            <li class="dropdown-header">Newsletter</li>
            <form class="form" role="form">
              <div class="form-group">
                <label class="sr-only" for="email">Email address</label>
                <input type="email" class="form-control" id="email" placeholder="Enter email">
              </div>
              <button type="submit" class="btn btn-primary btn-block">Subscribe</button>
            </form>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
  <!--END "Browse the Store" DROPDOWN -->


  <!-- ========== (LOGIN) JOHN SMITH PROFILE ============= -->
  <ul class="nav navbar-nav navbar-right">
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">John Smith (₴560000)<span class="glyphicon glyphicon-chevron-down"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Profile</a></li>
        <li><a href="#">Shopping Cart (₴560000)</a></li>
        <li><a href="#">Settings</a></li>
        <li role="separator" class="divider"></li>
      </ul>
    </li>
  </ul>

  <!-- ========== END (LOGIN) JOHN SMITH PROFILE ============= -->


  <!-- ======= START SEARCH ========== -->
  <form class="navbar-form" role="search">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search">
      <span class="input-group-btn">
          <button type="reset" class="btn btn-default">
            <span class="glyphicon glyphicon-remove">
              <span class="sr-only">Close</span>
      </span>
      </button>
      <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-search">
              <span class="sr-only">Search</span>
        </span>
      </button>
      </span>
    </div>
  </form>
  <!-- === END SEARCH === -->

Answer 3

根据我的评论：

<div class="collapse navbar-collapse js-navbar-collapse">

将元素与a-link重叠。您可以重新组织html，以便不会发生或执行此操作：

.nav-brand {
      position:relative;
      z-index:10;
 }

code pen update

html链接在页面上呈现，但行为与它不存在相似

更新

3 个答案: