将可单击的帮助图标添加到引导导航栏中的导航栏菜单项

Question

我正在尝试添加可单击和可悬停的小帮助图标，这些图标浮动到相应导航栏菜单项的右侧。我的问题是引导程序以一种似乎不是一项快速简单的任务的方式应用其样式。

我的图标是这样的（使用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>

根据注释进行更新（移动布局上的行图标和文本相同）

为了在桌面和移动视图中的导航项之一旁边显示带有另一个链接的图标，我已将类nav-iconitem添加到这些li。这会将a标签从 display: block 更改为 display: inline-block 。li应包含文本的单独a.nav-iconitem__text标记和图标的a.nav-iconitem__icon。类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>

根据注释进行更新（右侧的浮动图标）

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

也许可以通过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>

Answer 2

我的最终解决方案是在 LI-s 中使用table-cell显示模式，其中应该显示一个图标。我允许自己将图标放在左侧，以使事情变得更容易一些。

这是处理子菜单和折叠模式的 LESS 源。请注意，我使用的是Jasny Bootstrap的Offcanvas导航栏，因此某些部分引用了它。

.navbar {
    li.with-icon {
        & > a {
            display: table-cell;
            padding-left: 0;            
        }
        & > .navmenu-help-icon {
            display: table-cell;
            padding: @nav-link-padding;
            padding-right: 8px;
            line-height: 20px;
            cursor: pointer;
            color: white;
            font-size: 1em;
            //background-color: lighten(@navbar-inverse-bg, 20%);
        }
    }
    .dropdown-menu {
        li.with-icon {
            & > .navmenu-help-icon {
                display: table-cell;
                padding: 3px 10px;
            }
            & > a {
                width: 99%; // force spanning till right border
                padding-left: 0;
            }
        }
    }
    .offcanvas.canvas-slid {
        li.with-icon {
            & > .navmenu-help-icon {
                display: table-cell;
                padding: @nav-link-padding;                
            }
            & > a {
                width: 99%; // force spanning till right border
                padding-left: 0;
            }
        }
    }
}

HTML 标记如下所示：

<li class="with-icon">
   <span class="help-icon navmenu-help-icon" title="Some description"><i class="fa fa-question-circle"></i></span>
   <a href="#">The link</a>          
</li>