Question

我刚刚下载了最新版本的bootstrap ... 我建造了一个折叠导航器，它完成了它的目的，但是，当您在没有任何内容折叠后滚动菜单图标时发生。在所有演示中，导航弹出。我已经下载了示例，他们在菜单隐藏后也无法工作我到处寻找解决方案？有任何帮助非常感激！我包括写的代码..

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>

Answer 1

我怀疑你正在混合Bootstrap 2和Bootstrap 3代码。

检查出来：
Live view
Edit view

我已经使用了您的确切HTML和CSS，但使用了Bootstrap 2 CSS和JS

如果您确实想要使用Bootstrap 3，请仔细检查您是否拥有正确的CSS和JS文件，并且您会看到导航栏的HTML已更改，您可以从

获取示例导航栏

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

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

祝你好运

Bootstrap 3折叠菜单

1 个答案: