将可点击的帮助图标添加到 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%);
}

我无法将 link 和我的按钮包装在 div 中，因为 bootstrap 将 a 元素作为其 [=16 的第一级子元素=].如果我将图标放在 a 之后，我不知道如何水平对齐它们，它总是在 link 下方。我猜是因为 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>

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

要在 desktop 和 mobile 视图中的一个导航项旁边显示一个带有另一个 link 的图标，我已将 class nav-iconitem 添加到这些 li。这会将 a 标签从 display: block 更改为 display: inline-block。 li 应包含一个单独的 a.nav-iconitem__text 文本标签和一个 a.nav-iconitem__icon 图标标签。 classes 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>

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

Adding clickable help icons to navbar menu items in bootstrap navbar

html

css

twitter-bootstrap

twitter-bootstrap-3