1

最近、ブートストラップの最新バージョンをダウンロードしました...折りたたみ式のナビゲーションを作成しましたが、意図したとおりに機能しますが、折りたたみ後にメニューアイコンをロールオーバーしても何も起こりません。すべてのデモで、ナビゲーションがポップアップします。例をダウンロードしましたが、メニューが非表示になった後も機能しません¿ 書かれたコードを含むIm..

CSS

/*nav styles*/
.navbar{
    background:none;
}
.nav{
    margin-top:77px;
    margin-right:5%;
}

.navbar .brand {
    max-height: 40px;
    overflow: visible;
    padding-top: 0;
    padding-bottom: 0;
}
.navbar .nav  li{
    padding-left: 5px;
    font-weight: bold;
    text-transform: uppercase;
}
.navbar .nav  li a{
    background-color: #00AFE7;
    color: #000;
    -webkit-transition:background 1s ease;
-moz-transition:background 1s ease;
-o-transition:background 1s ease;
transition:background 1s ease;
}

.navbar .nav li  a:focus,
.navbar .nav  li  a:hover {
    color: #FFF;
    text-decoration: none;
    background-color: #000; 
    -webkit-transition:background 1s ease;
-moz-transition:background 1s ease;
-o-transition:background 1s ease;
transition:background 1s ease;
}

HTML

<body>
    <div class="navbar">
        <div class="container">
            <div class="navbar-inner">
                <button type="btn btn-navbar" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>

                </button> <a class="brand" href="#"><img class="pull-left "src="img/logo.png" /></a>

                <!--<a class="navbar-brand pull-left" href="#"><img class="pull-left "src="img/logo.png" /></a>-->
                <div class="nav-collapse collapse">
                    <ul class="nav nav-pills pull-right ">
                        <li class="active"><a href="#">Home</a>
                        </li>
                        <li><a href="#">Bikes</a>
                        </li>
                        <li><a href="#">About</a>
                        </li>
                        <li><a href="#">Store</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- Main component for a primary marketing message or call to action -->
    <div class="jumbotron">
        <h1>Navbar example</h1>

        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        <p> <a class="btn btn-large btn-primary" href="../../docs/#navbar">View navbar docs »</a>

        </p>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
</body>
4

1 に答える 1

1

Bootstrap 2 と Bootstrap 3 のコードが混在していると思われます。

これをチェックしてください:
ライブ ビュー
編集ビュー

あなたの正確な HTML と CSS を使用しましたが、Bootstrap 2 CSS と JS を使用しました

本当に Bootstrap 3 を使用したい場合は、正しい CSS ファイルと JS ファイルがあることを再確認してください。ナビゲーション バーの HTML が変更されていることがわかります。 

http://getbootstrap.com/components/#navbar

http://getbootstrap.com/components/#navbar

幸運を

于 2013-08-24T18:18:49.467 に答える