将Initializr模板中的导航按钮与导航栏底部对齐

Question

我的网站基于Initializr引导程序模板。而不是左上角的“项目名称”，我正在使用图像。导航链接仍然与页面顶部对齐，但我希望它们位于黑色导航栏的底部：

要重现最简单的方法是下载Bootstrap模板，并将导航栏中的“项目名称”更改为：

<a class="brand" href="#"><img src="apple-touch-icon-114x114-precomposed.png" /></a>

我不能为我的生活获取链接在导航栏的底部对齐，除非在.navbar .nav（.min.css）中设置bootstrap.css样式的上边距为约90px。然而，这种（基于像素的）解决方案感觉就像是一种错误的方法。

我尝试过玩position: relative; bottom: 0和vertical-align: bottom，但无济于事。这些模板中的CSS数量也无济于事（特别是对于像我这样的开发人员而不是设计师）。

任何人都可以将链接整齐地对齐到导航栏的底部吗？

Answer 1

如果通过抛弃Initializr（对我需要的太强大）并使用以下结构来修复它自己：

<div id="container">
    <div class="navbar">
        <a href="index.html" class="logo">
            <img src="img/logo.png" />
        </a>
        <div class="nav">
            <ul>
                <li><a href="page1.html">Page 1</a></li>
                <li><a href="page2.html">Page 2</a></li>
            </ul>
        </div>
    </div>
    <div class="clear"></div>
    <div class="content">
        Content here
    </div>
</div>

以下CSS：

#container { width: 1170px; margin: 0 auto; }
.navbar, .content { font-size: 1.6em; }
.navbar .logo { float: left; }
div.nav ul { list-style: none;padding: 0;}
div.nav ul li { display: inline;}
div.nav ul li a { display: block; background-image: url('../img/linksBackground.png'); background-position: 0 80px; background-repeat: no-repeat;
margin-top: 115px; float: left; padding: 11px 30px 9px 30px; text-decoration: none; color: #5dd2ff; }
div.nav ul li a:hover {color: #fff; background-position: 0 160px; background-color: #95e2ff;}
div.nav ul li.active a { color: #fff;font-weight: bold; background-position: left top; background-color: #5dd2ff;}

.clear { clear: both; }