我在一个元素上使用 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>
如果您尝试单击带有“Sharing Is Caring”文本的链接,什么也不会发生。但是,如果您使用 Tab 键突出显示它然后按 Enter,则可以选择链接并导航到它指向的 URL:
该链接在菜单折叠时也有效,如下所示:
如何让链接一直有效?
最佳答案
您的问题的解决方案非常简单。问题是因为“navbar-header”类有一个值为“left”的属性:float。 我知道至少有两种方法可以解决这个问题。 1).在navbar-header之后的下一个div中添加一个“navbar-right”类。即
<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。无论如何都要小心,因为你的折叠菜单在第二个解决方案中 float 到右边。
关于html - 为什么仅当导航栏折叠时才能单击导航栏品牌链接?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19969162/