我正在尝试添加可点击和可悬停的小帮助图标，这些图标会浮动到相应导航栏菜单项的右侧。我的问题是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支持）。
我怎么能这样做？
答案 0 :(得分：3)
我不确定这是否是您正在寻找的内容，但为什么不简单地将图标放在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>
根据评论进行更新（移动版面上的同一行图标和文字）
要在桌面和移动视图中的其中一个导航项旁边显示带有其他链接的图标，我已添加了课程{{1} } 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重叠，因此您不幸需要向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>
答案 1 :(得分：0)
我的最终解决方案是在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>