1

Initializrブートストラップ テンプレートに基づいて Web サイトを作成しています。左上隅の「プロジェクト名」の代わりに、画像を使用しています。ナビゲーション リンクはまだページの上部に配置されていますが、黒いナビゲーション バーの下部に配置したいと考えています。

Initializr Bootstrap テンプレート ナビゲーション

最も簡単に再現するには、Bootstrap テンプレートをダウンロードし、ナビゲーション バーの [プロジェクト名] を次のように変更します。

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

.navbar .navスタイルをbootstrap.css（.min.cssの）上余白を約90pxに設定しない限り、リンクをナビゲーションバーの下部に配置することはできません。ただし、この (ピクセルベースの) ソリューションは間違ったアプローチのように感じます。

position: relative; bottom: 0andで遊んでみまし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 に答える