1

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

Initializr Bootstrap 模板导航

要重现最简单的方法是下载 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 数量也无济于事（尤其是对于像我这样的开发者而非设计师）。

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

4

1 回答 1

0

如果通过放弃 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; }
于 2013-01-21T09:52:42.660 回答