在导航菜单中并排链接

Question

我正在尝试自定义Dashboard Template example。

如何使用Bootstrap直接添加另一个链接？

HTML：

<ul class="nav nav-sidebar">
<li class="active"><a href="#">Overview <span class="sr-only">(current)</span> <span class="glyphicon glyphicon-plus"></span></a></li>
<li><a href="#">Reports</a><a class="glyphicon glyphicon-plus"></a></li>
</ul>

Answer 1

使用span并包含li和图标

  <li><span><a href="#">Reports</a><a href="#" class="glyphicon glyphicon-plus"></a></span></li>

http://codepen.io/nagasai/pen/dXWgwA

您可以为li使用两个不同的链接 - 报告和图标。

Answer 2

只需将display规则更改为inline，然后针对这两个主播调整padding。您可能还想调整悬停样式。

＆＃13;

＆＃13;

.nav > li.xtr-padding {
  padding-top: 10px;
  padding-bottom: 10px;
}

.nav > li > a.inline-anchor {
  display: inline;
  padding: 0 15px 0 0;
  cursor: pointer;
}

.nav > li > a.inline-anchor:first-child {
  padding: 0 4px 0 15px;
}

.nav > li:hover .inline-anchor, .nav > li:hover {
  background-color: #eee;
  color: rgb(35, 82, 124);
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-sidebar">
  <li class="active"><a href="#">Overview <span class="sr-only">(current)</span> <span class="glyphicon glyphicon-plus"></span></a></li>
  <li class="xtr-padding"><a href="#" class="inline-anchor">Reports</a><a class="glyphicon glyphicon-plus inline-anchor"></a></li>
</ul>

＆＃13;

＆＃13;

＆＃13;