twitter-bootstrap – bootstrap折叠导航栏车开放

发布时间：2020-12-18 00:28:33 所属栏目：安全来源：网络整理

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

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

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

解决方法

我最近遇到过这个bug.

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!