javascript - 如何自定义 bootstrap fixed navbar-default 以便 li 元素向下对齐？

Question

如何自定义 bootstrap fixed navbar-default 以便 li 元素向下对齐？目前它默认在顶部对齐。您可以更正我的代码或展示您的自定义作品。您还可以向我展示 codepen jsfiddle 或其他类似网站上的任何存储库。

提前谢谢你。
.

<div class="container-fluid">

<div class="masthead">

    <!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="socialnav">
            <a class="btn" href="http://www.facebook.com/RetinaInc"><i class="fa fa-facebook fa-spin"></i></a>
            <a class="btn" href="http://www.twitter.com/RetinaInc"><i class="fa fa-twitter"></i></a>
            <a class="btn" href="http://www.facebook.com/RetinaInc"><i class="fa fa-linkedin"></i></a>
            <a class="btn" href="http://www.facebook.com/RetinaInc"><i class="fa fa-youtube"></i></a>
            <a class="btn" href="http://www.facebook.com/RetinaInc"><i class="fa fa-google-plus"></i></a>
        </div>
        <!-- /socialnav -->
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <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" href="/index">
                    <img class="logo" src="img/logo.png" />
                </a>

            </div>
            <!-- /nav header -->
            <div class="col-md-6 ">

            </div>
            <div class="navbar-collapse collapse navbar-right">

                <ul class="nav navbar-nav navtext col-md-offset-6">
                    <li><a href="services.html">Services</a>
                    </li>
                    <li><a href="news.html">News</a>
                    </li>
                    <li><a href="about.html">About</a>
                    </li>
                    <li><a href="contact.html">Contact</a>
                    </li>

                </ul>
            </div>
            <!--/.nav-collapse collapse -->
        </div>
        <!-- /container -->
    </div>
    <!-- /navbar navbar-default navbar-fixed-top -->

</div>
<!-- /masthead -->

更新:这是我的自定义 CSS - 再次更新

.navbar-brand{
  width:auto;
  height: auto;
}

 .navbar{
  margin-top: 1%;
  margin-right: 11%;
  margin-left: 11%;
  border-radius: 10px;
}
.navtext{
  position: relative;
  left:20%;
}
.navbar-default {   
  color:#ffffff;
}

.navbar-default .navbar-nav > li > a {
    color:#000;
    padding-left:20px;
    padding-right:20px; 
}
.navbar-default .navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus {
    color: #ffffff;
  background-color:transparent;
}

.navbar-default .navbar-nav > li > a:hover, .nav > li > a:focus {
    text-decoration: none;
    background-color: #33aa33;
}

.navbar-default .navbar-brand {
    color:#eeeeee;
    width: auto;

}
.navbar-default .navbar-rgba(255,0,0,0.7) toggle {
    background-color:#eeeeee;
}
.navbar-default .icon-bar {
    background-color:#33aa33;
}

.masthead {
  color: #000;
}
.logo {
  width: 40%;
}
.pull {
  margin-bottom: 15%;
}

Answer 1

在图像旁边垂直对齐文本的一种方法是:

.navbar-right{
  position: absolute;
  bottom: 0;
  right: 0;
}

不管它周围的元素如何，这都会使菜单链接出现在右下角。

但是，这会稍微弄乱我们的响应式菜单，因此我们将在移动设备上查看时将其恢复:

@media only screen and (max-width : 768px) {
   .navbar-right{
      position: relative; 
   }
}

DEMO