5

ナビバーからぶら下がっているadobeに似たロゴを試してみたいと思います。しかし、ブートストラップを使用してそれを行うことはできませんでした。

何かご意見は？

http://jsfiddle.net/EFTTp/1/

HTML:

<div class="navbar navbar-static-top">
    <div class="navbar-inner"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
 <a class="brand" href="index.html"> <img style="height:50px;" src="http://kpv.s3.amazonaws.com/static/img/logo.jpg"></a>

        <div class="nav-collapse collapse">
            <ul class="nav pull-left">
                <li class="active"><a href="index.html" class="scroller">Home</a>

                </li>
                <li><a href="pricing.html" class="scroller">Pricing</a>

                </li>
                <li><a href="knowledge.html" class="scroller">FAQ</a>

                </li>
            </ul>
        </div>
4

1 に答える 1

8

このデモをチェック

このcssを試してください：
絶対位置を試してください。
親 div に対して相対位置を指定し、子 div に対して絶対位置を指定します。

.navbar-inner{
    position:relative;
    padding-left:70px;
}
.navbar .brand {                
    position: absolute;
    left: 0px;
    top: 0px;
    width: 50px;
    background: #f00;        
    margin-left: 0px;
    padding: 10px;
}
于 2013-09-21T06:29:18.743 に答える