Question

我希望mynavbar折叠起来，直到所有li都有足够的空间适合navbar。我的navbar也具有右对齐的搜索栏。

在屏幕宽度达767时仍能正常工作从768到1320，单击时会立即打开和关闭。请帮助解决此问题。我还尝试过更改导航栏导航来阻止显示；没用我对此完全感到困惑。当导航栏切换功能在较小的屏幕宽度下正常工作时，导航栏切换在768之后如何无法工作。重要提示：我正在使用多个页面，并通过更改活动类在所有页面上复制了相同的导航栏代码。

 .navbar {
                    /*background-color:#fff;*/
                    background: url(backdrop1.png) no-repeat;
                    background-size: cover;
                    min-height: 150px !important;
                    border-radius: 0;
                    margin-bottom: 0;
                    border-bottom: 1px solid #eee !important;
                    z-index: 500;
                }

                .navbar-brand {
                    padding: 0 15px !important;
                    height: 150px;
                    line-height: 150px;
                }

                    .navbar-brand > img {
                        height: 100%;
                        padding: 15px 0;
                        width: auto;
                        margin: 0 auto;
                    }

                .navbar-collapse {
                    max-height: 100% !important;
                }

               .navbar-nav > li >a {
                    padding-top: 0px !important;
                    padding-bottom: 0px !important;
                    line-height: 150px;
                }
              #navform{
height:150px;
display:table-cell;
vertical-align : middle;
              }
                nav .navbar-toggle {
                    margin: 25px 15px 25px 0;
                    /*margin-top: 58px;
          padding: 9px 10px !important;*/
                }

                nav a {
                    font-weight: bold;
                    color: #186bac !important;
                    font-size: 16px;
                    transition: all 0.7s ease;
                }

                .navbar-nav li a:hover, .navbar-nav> .active > a {
                    color: #e54d1a !important;
                    background-color: transparent !important;
                }
                
                .dropdown-menu {
                    top:60%;
                    background-color: #BCD2EE !important;
                    color:#186bac;
                    
                }

                    .dropdown-menu li a {

                        color: #186bac !important;
                        background-color: #BCD2EE !important;
                        transition: all 0.7s ease;
                    }
                    .dropdown-menu li a:active, .dropdown>li>a {color:#e54d1a;}
                        .dropdown-menu li a:hover {
                            
                            color: #e54d1a !important;
                        }

                        .dropdown-menu li a:focus {
                            background-color: #4973AB !important;
                            color: White !important;
                        }

                        
                @media (min-width: 768px) and (max-width: 1320px) {
                    .navbar-collapse.collapse {
                        display: none !important;
                    }

                    .navbar-toggle {
                        display: block !important;
                        float: right;
                    }

                    .navbar-header {
                        float: none;
                    }
                }

                @media (max-width: 768px) {
                    #topbar {
                        display: none;
                    }

                    .navbar-brand {
                        height: 100px;
                    }

                    .navbar-nav > li > a {
                        line-height: 20px;
                        padding-top: 10px;
                        padding-bottom: 10px;
                    }
                }

<nav class="navbar navbar-default" id="HomeNavbar">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="Index.html">


                    <img class="img-responsive" src="logo.png" />
                </a>
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">



                <ul class="nav navbar-nav navbar-right">

                    <li class="active">
                        <a href="Index.html">HOME</a>

                    </li>
                    <li class="dropdown">

                        <a class="dropdown-toggle" data-toggle="dropdown" href="">
                            Menu1
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Menu1a</a></li>
                        </ul>

                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            Menu2
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="">Menu2a</a></li>
                            <li class="divider"></li>
                            <li><a href="">Menu2b</a></li>

                        </ul>
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            Menu3
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="">Menu3a</a></li>

                        </ul>
                    </li>
                    <li><a href="">Menu4</a></li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            Menu5
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Menu5a</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Menu5b</a></li>

                        </ul>
                    </li>

                    <li>
                        <form class="navbar-form" action="/action_page.php" id="navform" enctype="multipart/form-data">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="Search" name="search">
                                <div class="input-group-btn">
                                    <button class="btn btn-default" type="submit">
                                        <i class="glyphicon glyphicon-search"></i>
                                    </button>
                                </div>
                            </div>
                        </form>
                    </li>

                </ul>



            </div>
        </div>

    </nav>

Answer 1

问题是由以下行引起的，

.navbar-collapse.collapse {
    display: none !important;
}

在

下方

@media (min-width: 768px) and (max-width: 1320px)

当动画以“ collapsing”类运行时，可折叠对象在短时间内可见，并且一旦动画结束，由于该规则，该可折叠对象将被隐藏。

对于引导程序3：

您似乎已经忽略了他们的许多原始行为。您需要配对，

.navbar-collapse.collapse {
display: none !important;
}

使用

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

阅读类说明here，以了解原因。

Bootstrap Togle在768至1320屏幕宽度下无法正常工作

1 个答案: