16

次のように、ブートストラップのナビゲーション バーに画像 (ブランド ロゴ) を配置する方法はありますか。

<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
    <div class="container">
        <a class="brand" href="#"><img src="../Content/Images/logo.png" /></a>
    </div>
</div>
</div>

ナビゲーションバーの高さをそのままにしておきますか？私は試した

.navbar .brand
{
display: block;
height: 125px;
width: 246px;
padding: 0;
background: url('../Content/Images/logo.png') no-repeat left center;
float:left;
position: absolute;
}

配置に関しては良い結果が得られましたが、リンクがロゴの上に表示されます。

4

1 に答える 1

31

リンクはロゴの上に来ます

これは、絶対配置が原因です。

画像のサイズを変更せずに更新:

.navbar .brand {
    max-height: 40px;
    overflow: visible;
    padding-top: 0;
    padding-bottom: 0;
}

画像のサイズを変更しないデモ (jsfiddle)

于 2012-08-05T16:46:00.407 に答える