1

Twitterのブートストラップで基本的なナビゲーションバーを作成しました。そしてロゴを入れてみました。しかし、問題は、ウィンドウのサイズを変更すると応答性が失われることです。つまり、ナビゲーションの折りたたみが機能しません。

これが私のナビゲーションバーのコードです

<nav>
    <div class="navbar navbar-top">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar">
                    <span class="icon-th-list"></span>
                </a>
                <a href="#" class="brand"> aniya</a>
                <div class="nav-collapse collapse">
                    <ul class="nav pull-right">
                        <li><a href="#">about us</a></li>
                        <li><a href="#">contact us</a></li>
                        <li><a href="#">Blog</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</nav> <!----nav--->

ここに私のCSSがあります

body {
    position: relative; width: 960px; padding: 30px; margin: 30px auto 5px; background: white; -moz-box-shadow: 0 0 20px black;
}

    .navbar .navbar-inner {
        height: 120px;
        width: auto;
    }


    .navbar .navbar-inner .container .brand {
        background-image: url(img/sample%20logo.jpg);
        width:500px;
        height:100px;
        background-repeat: no-repeat;

        text-indent:-9999px;
    }

これは私が作ったものです

http://i47.tinypic.com/2uo5g76.jpg

4

1 に答える 1

1

ここにはかなりの問題があると思います。

まず、レスポンシブなBootstrap cssなどをすべてページに確実にロードしていると思いますか？

このページを見てください：http ：//twitter.github.com/bootstrap/examples/hero.html

応答性に必要なファイルとHTMLが正確に表示されます。

上記のcssでは、パディング、マージンなどとともにボディタグに設定された幅があります。これは、ブートストラップページでは通常のことではないようで、問題が発生すると思います。

それが役立つかどうかは100％わかりませんが、ボタン要素にあるデータ属性をbtn-navbarに追加してみてください

<a class="btn btn-navbar">
 <span class="icon-th-list"></span>
</a>

また、ナビゲーションバーが折りたたまれないのは、ロゴ画像のサイズが原因である可能性があります。

これに対処するために、いくつかのメディアクエリを書き込む必要がある場合があります。おそらく、低解像度の場合は小さい画像を提供します。

私がここで言ったことのいくつかがあなたを助けるか、少なくともあなたを正しい道に導くことを願っています。

于 2013-02-08T10:12:48.157 に答える