1

我最近刚刚下载了最新版本的引导程序...我构建了一个可折叠的导航，它可以按预期进行，但是，当您在菜单图标折叠后滚动菜单图标时，什么也没有发生。在所有演示中，导航都会弹出。我已经下载了示例，但在菜单被隐藏后它们也无法工作¿我已经到处寻找解决方案？任何帮助将不胜感激！我包括编写的代码..

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 回答