对齐自举导航栏中的项目

Question

我尝试在自举导航栏中垂直对齐位于桌面和移动视图上的项目时绝对堆叠。 有没有人可以解释如何去迪呢？

我需要将头像和名称对齐到桌面上的右侧，并且移动并在导航栏中垂直居中。 这里的HTML代码：

<nav class="navbar navbar-default" role="navigation"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand logo" href="#"><b>Super</b> logo</a> 
     </div> 
     <div class="nav navbar-nav navbar-right"> 
      <ul class="unstyled"> 
       <li> 
        <a href="/profile"> 
         <img class="img-rounded" src="http://lorempixel.com/output/people-q-c-150-150-9.jpg" alt=""> 
         <span class="hidden-xs">User name</span> 
        </a> 
       </li> 
      </ul> 
     </div> 
     <div class="navbar-collapse collapse" id="main-nav"> 
      <ul class="nav navbar-nav visible-xs"> 
       <li><a href="#"><i class="fa fa-tachometer"></i> menu 1</a></li> 
       <li><a href="#"><i class="fa fa-wrench"></i> menu 2</a></li> 
       <li><a href="#"><i class="fa fa-sign-out"></i> menu 3</a></li> 
      </ul> 
     </div> 
     </div></nav> 

和CSS

.navbar-toggle { 
     position: absolute; 
     left: 10px; 
    } 
.logo { 
    width: 100%; 
    padding: 15px 0; 
    text-align: center; 
    height: 20px; 
} 
.img-rounded { 
    height: 35px; 
    width: 35px; 
    border-radius: 50%; 
} 
.unstyled li { 
     list-style: none; 
} 
.unstyled a { 
     text-decoration: none; 
} 
@media only screen and (min-width: 768px) { 
    .logo { 
     width: 150px; 
    } 
} 

这是一个错误的eximple。 http://www.bootply.com/zh0J2u4KUU

Answer 1

更新使用该

@media (max-width: 767px) 
{ 
ol, ul{margin-top:6px; margin-right:302px; 
} 


<ul class="unstyled pull-right"> 
<li> 
******* 
</li> 
</ul> 

变化的标志类，右拉！