부트 스트랩 - 네비게이션의 하단 맞춤 메뉴

Question

메뉴 텍스트를 부트 스트랩 3 네비게이션 하단에 정렬해야합니다.

내 코드는 다음과 같습니다

<nav class="navbar navbar-default"> 
 
     <div class="container"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 
     <a class="navbar-brand" href="#"><img class="img-responsive" src="/assets/img/outa.png" width="120px;"/></a> 
 
     </div> 
 
     <div class="collapse navbar-collapse" id="myNavbar"> 
 
      <ul class="nav navbar-nav pull-right"> 
 
       <li><a href="/browser/saved/">Saved searches</a></li> 
 
       <li><a href="../index.html">Settings</a></li> 
 
       <li><a href="../index.html">About</a></li> 
 
       <li><a href="../index.html">Sign In</a></li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </nav>

이것은 음영 네비게이션 바에서 수직으로 메뉴를 중심으로. 메뉴가 음영 처리 된 네비게이션 영역의 맨 아래 4 픽셀 위에 놓 이도록 변경할 수 있습니까?

Answer 1

트릭을해야합니다.

#myNavbar { 
    position: relative; 
} 

#myNavbar .nav { 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    margin-bottom: -10px; 
} 

JSFiddle