ナビゲーションメニューにリンクを並べて表示する

Question

Dashboard Template exampleをカスタマイズしようとしています。

ブートストラップを使用してリンクをすぐ隣に追加するにはどうすればよいですか？

は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

利用スパンとは、Liとアイコン

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

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

あなたは、Li 2つの異なるリンクを使用することができます

が含まれます。

Answer 2

displayのルールをinlineに変更し、2つのアンカーについてpaddingを調整してください。また、ホバースタイルを変更することもできます。

.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); 
 
}

<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>