對齊自舉導航欄中的項目

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> 

變化的標誌類，右拉！