Question

引导程序折叠导航栏出现问题。页面底部的导航栏很好地折叠，但是当尝试使用折叠导航栏按钮在折叠状态下打开时，导航栏只会打开一秒钟，然后立即关闭。我必须点击两次才能重新打开（然后显然关闭），所以我怀疑它确实是开放的，但是不可见（即技术上在第二次点击时关闭）。

＆＃13;

a {text-decoration:none; font-family: EB Garamond;-webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;}

.navbar-header {
    padding-right:20px;
}

.navbar-header > a > i{
    color: #777;
    padding-top: 10px;
    padding-left:10px;
    padding-right:10px;
}



.navbar-header > a > i:hover{
    color: white;
    text-decoration:none; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;
}



.navbar-footer > li {
    padding-left:5px;
    padding-right:5px;
}


body {
  background: url(./img/home-background.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding-top: 50px;
}



.jumbotron {
  background-color: rgba(255,255,255, 0.5);
  color: inherit;
}

#banner-txt {
  position-left: -50px;
}

#banner-txt > h1 {
    font-size: 500%;
    font-family: EB Garamond;
    color: #96281B;
}

@media (max-width: 1100px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

#brand{
    margin-top: -10px;
    width: 40px;
    height: 40px;
    background: url(./img/brand-999.png);
    background-size: 40px auto;
}
#brand:hover{
    background: url(./img/brand-fff.png);
    background-size: 40px auto;
    -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;
}

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" ></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript" ></script>

<!DOCTYPE html>
<html>
     <head>
        <title>Homepage</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href= "css/bootstrap.min.css" rel="stylesheet">
        <link href = "index.css" rel = "stylesheet">
        <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    </head>
    <body>

        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="navbar-header pull-left">
                <a class="navbar-brand" href="./index.html">
                    <div id="brand">

                    </div>
                </a>
            </div>
            <div class="navbar-header pull-right">
                <a href=""><i class="fa fa-twitter fa-2x"></i></a>
                <a href=""><i class="fa fa-facebook fa-2x"></i></a>
                <a href=""></i></a>
            </div>
        </div>


        <br><br><br><br>
        <div class="container"> 
            <div class="pull-left" id="banner-txt">
                <h1>SPORTS TEAM HOMEPAGE</h1>
                <p>
                </p>
            </div>
        </div>

        <div class = "container-fluid">
            <nav class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
                <div class= "navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navFooterCollapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="collapse navbar-collapse navFooterCollapse">                       
                    <ul class="nav navbar-nav navbar-footer">
                        <li><a href="">ABOUT</a></li>
                        <li><a href="">CONTACT</a></li>
                        <li><a href="">BLOG</a></li>
                        <li><a href="">ROSTER</a></li>
                        <li><a href="#">STRENGTH AND CONDITIONING</a></li>
                        <li><a href="#">RESULTS</a></li>
                        <li><a href="#">PROGRAM</a></li>
                        <li><a href="#">MERCH</a></li>
                        <li><a href="#">COMMUNITY</a></li>
                    </ul>
                </div>
            </nav>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>

＆＃13;

Answer 1

我最近遇到过这个错误。

我在css中添加了这段代码，它对我有用。我希望它也适合你。

.navbar-collapse.collapse.in {
  display: block!important;
}

Answer 2

在大多数情况下，我实际上发现定义position:absolute;或position:relative可以使

bootstrap折叠导航栏车开放

2 个答案: