为什么只有当导航栏折叠时，导航栏品牌链接才可以点击？

Question

我在项目中使用Bootstrap，我有以下HTML（目前可见here）：

<nav class='navbar navbar-default' role='navigation'>
  <div class='navbar-header'>
    <button class='navbar-toggle' data-target='#header-navbar' data-toggle='collapse' type='button'>
      <span class='sr-only'>Toggle navigation</span>
      <span class='icon-bar'></span>
      <span class='icon-bar'></span>
      <span class='icon-bar'></span>
    </button>
    <a class="navbar-brand" href="http://ea-skillshare.herokuapp.com/">Sharing Is Caring</a>
  </div>
  ...
</nav>

如果您尝试点击“共享关怀”文字的链接，则不会发生任何事情。但是，如果您使用Tab键突出显示它，然后按Enter键，则可以选择链接并导航到它指向的URL：

折叠菜单时链接也有效，如下所示：

如何让链接始终有效？

Answer 1

您的问题的解决方案非常简单。问题是因为“navbar-header”类有一个属性：float“，其值为”left“。 我知道至少有两种方法可以解决这个问题。 1）。在navbar-header之后立即将“navbar-right”类添加到下一个div。即

<nav class='navbar navbar-default' role='navigation'>
<div class='navbar-header'>
    <button class='navbar-toggle' data-target='#header-navbar' data-toggle='collapse' type='button'>
        <span class='sr-only'>Toggle navigation</span>
        <span class='icon-bar'></span>
        <span class='icon-bar'></span>
        <span class='icon-bar'></span>
    </button>
    <a class="navbar-brand" href="http://ea-skillshare.herokuapp.com/">Sharing Is Caring</a>
</div>
<div class="collapse navbar-collapse navbar-right" collapse="!isCollapsed">
    ...
</div>

2）。将值为“right”的float属性自己添加到下一个div。无论如何要小心，因为你的折叠菜单会在第二个解决方案中向右浮动。

Answer 2

你的代码告诉我你正在尝试使用Bootstrap 3而你的Heroku上的应用程序似乎包括Bootstrap 2.3.2。如果您能够将站点上加载的css / js文件更新到BS 3，那么您应该很高兴。

Answer 3

如果上述解决方案不起作用，我遇到了类似的问题，并且可以通过从我的navbar-header元素中删除添加的position: relative类来解决它。

背景：我使用的是bootstrap 3.2.0，我的navbar-brand链接只能在导航栏折叠时才能使用。我已经给出了导航栏菜单position: absolute，因此我可以使用.container将position:relative的边缘和底部对齐。但是，我还在我的navbar-header元素中添加了position: relative，这是不必要的，并且破坏了我的链接。

Answer 4

我找到了更好的解决方案。只需从class="navbar-brand"代码中移除<a>，然后在其中添加<div>：

<div class="navbar-brand"><a href="http://ea-skillshare.herokuapp.com/">Sharing Is Caring</a></div>