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

Question

我的网站基于 Initializr Bootstrap 模板。我使用的不是左上角的“元素名称”，而是一张图片。导航链接仍然与页面顶部对齐，但我希望它们位于黑色导航栏的底部:

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

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

我一辈子都无法让链接对齐导航栏底部，除非在 bootstrap.css 中设置 .navbar .nav 样式( .min.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; }