引导折叠导航栏越野车打开答案

【问题标题】：bootstrap collapsed navbar buggy open引导折叠导航栏越野车打开
【发布时间】：2014-09-16 21:07:56
【问题描述】：

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

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;
}

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

【问题讨论】：

你能把你的帖子变成complete runnable live example吗？
完成。抱歉，Stack Overflow 的新手。介意再看一下吗？
问题是由您的自定义 CSS 引起的。如果我删除它，那么导航栏（取消）折叠工作正常。所以，开始删除它的一部分，直到找到罪魁祸首。
@cvrebert 您可以将其发布为答案。这正是我的错误导航栏的问题所在，那是我的自定义 CSS。谢谢

标签： twitter-bootstrap navbar

【解决方案1】：

我最近遇到了这个错误。

我在 css 中添加了这段代码，它对我有用。我希望它对你也能正常工作。

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

【讨论】：

显示：块！重要；可以，但是如果您将浏览器的大小调整为笔记本电脑大小，它将破坏菜单。更好用： .navbar-collapse.collapse.in { display: inline-block; }

【解决方案2】：

在我的错误的大多数情况下，我实际上发现定义 position:absolute; 或 position:relative 使得

【讨论】：