3

我在一个项目中使用 Bootstrap，并且我有以下 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：

在此处输入图像描述

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

在此处输入图像描述

如何使链接始终有效？

4

5 回答 5

8

您的问题的解决方案非常简单。问题是因为“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。无论如何都要小心，因为您的折叠菜单会在第二种解决方案中向右浮动。

于 2014-09-24T23:06:52.980 回答
2

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

背景：我使用的是引导程序 3.2.0，我的导航栏品牌链接仅在导航栏折叠时才有效。我已经给出了导航栏菜单position: absolute，所以我可以将它沿 a 的边缘和底部.container对齐position:relative。但是，我还添加了position: relativenavbar-header 元素，这是不必要的并且破坏了我的链接。

于 2014-07-30T19:41:37.403 回答
2

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

于 2013-11-14T04:03:04.270 回答
0

如果它对任何人都有帮助，那么对我来说解决方案是不同的。被<a class="navbar-brand"...>...</a>放置在<nav class='navbar....>...</nav>. 将其移入（和顶部）有助于解决问题。

于 2017-08-12T11:15:58.423 回答
0

我为此找到了更好的解决方案。只需class="navbar-brand"从<a>标签中删除并<div>在其前面添加：

<div class="navbar-brand"><a href="http://ea-skillshare.herokuapp.com/">Sharing Is Caring</a></div>
于 2015-10-23T10:14:22.600 回答