如何显示图标右侧＆amp;导航栏上的顶部位置使用bootswrap

Question

我试图在导航栏右侧显示箭头图标，现在看起来如下所示

但需要在屏幕下方显示

<div id="sidebar-wrapper">
  <ul class="sidebar-nav">
    <li class="sidebar-brand"><a href="#">Start Bootstrap </a>
    </li>
    <li><a href="#"><span style="float:right" class="glyphicon glyphicon-chevron-left"> </span></a> 
    </li>
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">About</a> 
    </li>
    <li><a href="#">Contact</a> 
    </li>
  </ul>
</div>

请让我知道如何设置与屏幕截图完全相同。

Answer 1

试试这个。

＆＃13;

＆＃13;

	.sidebar-nav li{
		background: #000000; 
		line-height: 40px; 
		list-style: outside none none; 
		position: relative;
		border-bottom:1px solid #333;
	}
	.sidebar-nav li a { 
		color: #ffffff; 
		padding: 0 10px; 
		text-decoration: none;
		position:relative;
	}
	span.arrow { 
		float: right;
		display: inline-block;
		background-color: #eee;
		color: #000;
		padding: 5px;
		border-top-left-radius: 4px;
		border-bottom-left-radius: 4px;
		margin-top: 6px;
	}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-sm-3 col-xs-6" id="sidebar-wrapper">
	<ul class="sidebar-nav">
		<li class="sidebar-brand"><a href="#">Start Bootstrap </a></li>
		<li><a href="#"><span class="glyphicon glyphicon-chevron-left arrow"></span></a> </li>
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a> </li>
		<li><a href="#">Contact</a> </li>
	</ul>
</div>

＆＃13;

＆＃13;

＆＃13;