jquery - Bootstrap - 响应式导航栏无法正常工作

Question

我navbars最初有 2 ， A 和 B ，当您将浏览器缩小到max-width: 767pxA 之上的 B 集时I needed A on top of B，这是我上一个问题中的答案，我选择了css答案，但是当您单击按钮显示时出现了故障narvars, 的内容A保持在同一个地方，但B移动到下面A，这不是所需的功能。

为了让事情更清楚......我将以图形方式显示它：

在点击按钮之前显示navbar的内容

点击按钮后显示navbar的内容

最初Main Menu是在 之上Title，这被下一个CSS班级改变了：

.navbar-left {
    position: relative;
    top: 88px;
}
.navbar-inner {
    position: relative;
    top: -44px;
}

这是现场演示：点击这里

我对任何解决方案持开放态度，包括导航jquery的css变化。

这是我的习惯CSS：

body{
    border: solid;    
}
.navbar {
    margin-bottom: 3px;
}
.btn-group {
    float: right;
}
/*****************************************************/
/*************** LEFT NAV CUSTOM STYLES **************/
/*****************************************************/
 .navbar-inner-left {
    padding-right: 0;
    padding-left: 0;
}
.navbar-left {
}
.navbar-left .nav>li {
    float:none;
}
.navbar-inner-left div>.nav-list {
    padding-left: 0;
}
.navbar-inner-left .container-fluid>.brand {
    padding: 10px 5px 10px 5px;
}
.navbar-inner-left {
    border: none;
    background-color: #ffffff;
    background-image: -moz-linear-gradient(top, #ffffff, #ffffff);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#ffffff));
    background-image: -webkit-linear-gradient(top, #ffffff, #ffffff);
    background-image: -o-linear-gradient(top, #ffffff, #ffffff);
    background-image: linear-gradient(to bottom, #ffffff, #ffffff);
    border: none;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffffffff', GradientType=0);
    -webkit-box-shadow: 0;
    -moz-box-shadow: 0;
    box-shadow: 0;
}
/*************** RESPONSIVE STUFFF ***************/
/*************** RESPONSIVE STUFFF ***************/
/*************** RESPONSIVE STUFFF ***************/
/*****************************************************/
/*************** LEFT NAV CUSTOM STYLES **************/
/*****************************************************/
@media (min-width: 1200px) {
}
@media (min-width: 980px) {
}
@media (max-width: 979px) {
}
@media (min-width: 768px) and (max-width: 979px) {
    .navbar-left .btn-navbar {
        margin-right: -15px;
    }
    .navbar-inner-left .container-fluid>.brand {
        float: left;
    }
}
@media (max-width: 767px) {
    /* BEGIN classes that make Title comes on top of Main Menu */
    .navbar-left {
        position: relative;
        top: 88px;
    }
    .navbar-inner {
        position: relative;
        top: -44px;
    }
    /* END classes that make Title comes on top of Main Menu */    
    #logo-client {
        display:none;
    }
}
@media (max-width: 767px) and (min-width: 480px) {
    .nav-collapse .nav>li>a, .nav-collapse .dropdown-menu a {
        padding-left: 30px;
    }
    .navbar-inner-left .container-fluid>.brand {
        padding-left: 30px;
    }
    .navbar-inner-left .nav-list>.nav-header {
        padding-left: 20px;
    }
    .navbar-left .btn-navbar {
        margin-right: 26px;
    }
}
@media (max-width: 480px) {
    .nav-collapse .nav>li>a, .nav-collapse .dropdown-menu a {
        padding-left: 30px;
    }
    .navbar-inner-left .container-fluid>.brand {
        padding-left: 30px;
    }
    .navbar-inner-left .nav-list>.nav-header {
        padding-left: 20px;
    }
    .navbar-left .btn-navbar {
        margin-right: 26px;
    }
    /*.span2 {
        margin:0 auto;
        top: 100px;
        clear:none;
        width:100%;
    }
    .span10 {
        margin:0 auto;
        top:0px;
        clear:both;
        width:100%;
    }*/
}

HTML代码片段

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span2">
            <img id="logo-client" alt="140x140" src="http://lorempixel.com/140/140/" />
            <div class="navbar navbar-left">
                <div class="navbar-inner navbar-inner-left">
                    <div class="container-fluid">   <a data-target=".navbar-responsive-collapse" data-toggle="collapse" class="btn btn-navbar">
                    <span class="icon-bar"></span><span class="icon-bar"></span>
                    <span class="icon-bar"></span></a>  <a href="#" class="brand">Main Menu</a>

                        <div class="nav-collapse collapse navbar-responsive-collapse">
                            <ul class="nav nav-list">
                                <li class="nav-header">List header</li>
                                <li>    <a href="#">Home</a>

                                </li>
                                <li>    <a href="#">Library</a>

                                </li>
                                <li>    <a href="#">Applications</a>

                                </li>
                                <li class="nav-header">Another list header</li>
                                <li>    <a href="#">Profile</a>

                                </li>
                                <li>    <a href="#">Settings</a>

                                </li>
                                <li class="divider"></li>
                                <li>    <a href="#">Help</a>

                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="span10">
            <div class="navbar">
                <div class="navbar-inner">
                    <div class="container-fluid"> <a data-target=".navbar-responsive-collapse" data-toggle="collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a>  <a href="#" class="brand">Title</a>

                        <div class="nav-collapse collapse navbar-responsive-collapse">
                            <ul class="nav">
                                <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<strong class="caret"></strong></a>

                                    <ul class="dropdown-menu">
                                        <li>    <a href="#">Action</a>

                                        </li>
                                        <li>    <a href="#">Another action</a>

                                        </li>
                                        <li>    <a href="#">Something else here</a>

                                        </li>
                                        <li class="divider"></li>
                                        <li class="nav-header">Nav header</li>
                                        <li>    <a href="#">Separated link</a>

                                        </li>
                                        <li>    <a href="#">One more separated link</a>

                                        </li>
                                    </ul>
                                </li>
                                <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<strong class="caret"></strong></a>

                                    <ul class="dropdown-menu">
                                        <li>    <a href="#">Action</a>

                                        </li>
                                        <li>    <a href="#">Another action</a>

                                        </li>
                                        <li>    <a href="#">Something else here</a>

                                        </li>
                                        <li class="divider"></li>
                                        <li class="nav-header">Nav header</li>
                                        <li>    <a href="#">Separated link</a>

                                        </li>
                                        <li>    <a href="#">One more separated link</a>

                                        </li>
                                    </ul>
                                </li>
                                <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<strong class="caret"></strong></a>

                                    <ul class="dropdown-menu">
                                        <li>    <a href="#">Action</a>

                                        </li>
                                        <li>    <a href="#">Another action</a>

                                        </li>
                                        <li>    <a href="#">Something else here</a>

                                        </li>
                                        <li class="divider"></li>
                                        <li class="nav-header">Nav header</li>
                                        <li>    <a href="#">Separated link</a>

                                        </li>
                                        <li>    <a href="#">One more separated link</a>

                                        </li>
                                    </ul>
                                </li>
                                <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<strong class="caret"></strong></a>

                                    <ul class="dropdown-menu">
                                        <li>    <a href="#">Action</a>

                                        </li>
                                        <li>    <a href="#">Another action</a>

                                        </li>
                                        <li>    <a href="#">Something else here</a>

                                        </li>
                                        <li class="divider"></li>
                                        <li class="nav-header">Nav header</li>
                                        <li>    <a href="#">Separated link</a>

                                        </li>
                                        <li>    <a href="#">One more separated link</a>

                                        </li>
                                    </ul>
                                </li>
                            </ul>
                            <ul class="nav pull-right">
                                <li>    <a href="#">Link</a>

                                </li>
                                <li class="divider-vertical"></li>
                                <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<strong class="caret"></strong></a>

                                    <ul class="dropdown-menu">
                                        <li>    <a href="#">Action</a>

                                        </li>
                                        <li>    <a href="#">Another action</a>

                                        </li>
                                        <li>    <a href="#">Something else here</a>

                                        </li>
                                        <li class="divider"></li>
                                        <li>    <a href="#">Separated link</a>

                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="btn-group">
                <button class="btn" type="button"><em class="icon-align-left"></em>

                </button>
                <button class="btn" type="button"><em class="icon-align-center"></em>

                </button>
                <button class="btn" type="button"><em class="icon-align-right"></em>

                </button>
                <button class="btn" type="button"><em class="icon-align-justify"></em>

                </button>
            </div>
        </div>
    </div>
</div>

---

更新

按照 Morpheus 的建议，现在两者navbar的行为独立，主要错误仍然存​​在，这里有一个更新：

单击此处查看最新示例

提前致谢！

Answer 1

您应该更改data-target=".navbar-responsive-collapse"为定位唯一类，因为现在您一次定位两个具有相同类的 div。

例子

<a data-target=".unique" data-toggle="collapse" class="btn btn-navbar">
<div class="nav-collapse collapse navbar-responsive-collapse unique">

注意独特的类。jsfiddle

更新

我删除了这些样式：

.navbar-left {
    position: relative;
    top: 88px;
}

.navbar-inner {
    position: relative;
    top: -44px;
}

它解决了这个问题。我不知道这是否适合您，因为菜单更改了堆叠位置。更新了 jsfiddle