html - 将可点击的帮助图标添加到 Bootstrap 导航栏中的导航栏菜单项

Question

我正在尝试添加可点击和悬停的小帮助图标，这些图标漂浮在相应导航栏菜单项的右侧。我的问题是 bootstrap 应用其样式的方式似乎不是一件容易的事。

我的图标应该是这样的(使用 FontAwesome):

<span class="navmenu-help-icon"><i class="fa fa-question-circle"></i></span>

我当前的图标 LESS 代码是(基于 a 元素的样式):

.navbar-nav > li > .navmenu-help-icon {
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px;
    cursor: pointer;
    color: white;
    background-color: lighten(@navbar-inverse-bg, 20%);
}

我无法将链接和我的按钮包装在 div 中，因为 Bootstrap 将 a 元素作为其 li 的第一级子元素>。如果我将图标放在 a 之后，我不知道如何水平对齐它们，它总是位于链接下方。我猜是因为 a 元素的 display: block 样式。

我只针对现代浏览器(预期完整的 CSS3 支持)。

我该怎么做？

Answer 1

我不确定这是否是您要查找的内容，但为什么不直接将图标放在 a 中呢？标签，例如 <li><a href="#">Help <i class="fa fa-question-circle"></i></a></li> ？

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="#">Help <i class="fa fa-question-circle"></i></a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div><!--/.container-fluid -->
</nav>

根据评论更新(移动布局上的同一行图标和文本)

要在桌面 和移动 View 中的导航项之一旁边显示带有另一个链接的图标，我添加了类 nav-iconitem这些 li的。这改变了 a来自 display: block 的标签至 display: inline-block . li应该包含一个单独的 a.nav-iconitem__text文本标签和 a.nav-iconitem__icon对于图标。类(class)nav-iconitem__text和 .nav-iconitem__icon用于更改文本和图标之间的距离。

@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css');
@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css');

.nav > li.nav-iconitem > a {
  display: inline-block;
}

.nav > li.nav-iconitem > a.nav-iconitem__text {
  padding-right: 0;
}

.nav > li.nav-iconitem > a.nav-iconitem__icon {
  padding-left: 0;
}

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="nav-iconitem"><a href="#" class="nav-iconitem__text">Help</a>
        <a href="#" class="nav-iconitem__icon"><i class="fa fa-question-circle"></i></a></li>
        <li><a href="#">Regular</a>        
      </ul>
    </div><!--/.nav-collapse -->
  </div><!--/.container-fluid -->
</nav>

根据评论更新(右侧 float 图标)

要使图标向右浮动，最简单的方法可能是设置position: relative。到 .nav-iconitem和 position: absolute , top: 0和 right: 0到 .nav-iconitem__icon .由于图标可能与 .nav-iconitem__text 重叠不幸的是，您需要添加一个固定大小的 padding-right到 .nav-iconitem .

也许可以通过 display: table 来实现这一点，但由于表格有增长的趋势，您可能无论如何都需要固定宽度。我更喜欢在图标上使用固定宽度而不是包含文本的容器。

@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css');
@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css');

.nav > li.nav-iconitem {
  display: relative;
  padding-right: 30px;
}

.nav > li.nav-iconitem > a.nav-iconitem__text {
  padding-right: 0;
}

.nav > li.nav-iconitem > a.nav-iconitem__icon {
  position: absolute;
  top: 0;
  right: 0;
  padding-left: 0;  
}

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="nav-iconitem"><a href="#" class="nav-iconitem__text">Help</a>
        <a href="#" class="nav-iconitem__icon"><i class="fa fa-question-circle"></i></a></li>
        <li><a href="#">Regular</a>        
      </ul>
    </div><!--/.nav-collapse -->
  </div><!--/.container-fluid -->
</nav>