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

Question

我使用的引导上一个项目,我有以下的HTML(当前可见这里):

<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-right"类来navbar-header之后的下一个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.无论如何要小心,因为你的折叠菜单浮动到第二个解决方案的右边.