我正在尝试添加可点击和悬停的小帮助图标,这些图标漂浮在相应导航栏菜单项的右侧。我的问题是 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 支持)。
我该怎么做?
最佳答案
我不确定这是否是您要查找的内容,但为什么不直接将图标放在 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>
关于html - 将可点击的帮助图标添加到 Bootstrap 导航栏中的导航栏菜单项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27981398/