twitter-bootstrap Bootstrap - 导航栏中的底部对齐菜单

Bootstrap - Bottom align menu in navbar

提问by Bill Noble

I need to align the menu text with the bottom of the Bootstrap 3 navbar.

我需要将菜单文本与 Bootstrap 3 导航栏的底部对齐。

My code is:

我的代码是：

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

This centers the menu vertically in the shaded navbar. Is it possible to change this so that the menu lies 4px above the bottom of the shaded navbar area?

这使菜单在阴影导航栏中垂直居中。是否可以更改此设置，以便菜单位于阴影导航栏区域底部上方 4px 处？

采纳答案by S.Visser

This should do the trick.

这应该可以解决问题。

#myNavbar {
    position: relative;
}

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

JSFiddle

JSFiddle