Question

I M在我的网站中左右两侧使用两个垂直导航栏当我切换到移动视图导航栏折叠时，当我点击一个导航栏进行展开时，两个菜单都会展开

我想一次扩展一个导航栏

请告诉合适的解决方案

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"     Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

    <link href="bootstrap-3.3.5-dist/css/bootstrap.css" rel="stylesheet" />
    <link href="Style/StyleSheet.css" rel="stylesheet" />
   </head>
<body>
<form id="form1" runat="server">
    <div class="Header">
        <div class="container">
            <div class="row">
                <div class="col-lg-2 HeadLeft">
                    STATUS 99
                </div>
                <div class="col-lg-8">
                </div>
                <div class="col-lg-2 HeadRight">
                    <ul class="list-inline">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">FB Scrap</a></li>
                        <li><a href="#">SMS</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-lg-2 LeftMenu">
                <h4>FB Status Categories</h4>
                <div class="sidebar-nav">
                    <div class="navbar navbar-default" role="navigation">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <span class="visible-xs navbar-brand">Sidebar menu</span>
                        </div>
                        <div class="navbar-collapse collapse sidebar-navbar-collapse">
                            <ul class="nav navbar-nav">
                                <li class="active"><a href="#">Menu Item 1</a></li>
                                <li><a href="#">Menu Item 2</a></li>
                                <li><a href="#">Menu Item 3</a></li>
                                <li><a href="#">Menu Item 4</a></li>
                                <li><a href="#">Reviews <span class="badge">1,118</span></a></li>
                            </ul>
                        </div>
                        <!--/.nav-collapse -->
                    </div>
                </div>
            </div>

            <div class="col-lg-2 col-lg-push-8 RightMenu">
                <h4>FB Cover pictures</h4>
                <div class="sidebar-nav">
                    <div class="navbar navbar-default" role="navigation">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <span class="visible-xs navbar-brand">Sidebar menu</span>
                        </div>
                        <div class="navbar-collapse collapse sidebar-navbar-collapse">
                            <ul class="nav navbar-nav">
                                <li class="active"><a href="#">Menu Item 1</a></li>
                                <li><a href="#">Menu Item 2</a></li>
                                <li><a href="#">Menu Item 3</a></li>
                                <li><a href="#">Menu Item 4</a></li>
                                <li><a href="#">Reviews <span class="badge">1,118</span></a></li>
                            </ul>
                        </div>
                        <!--/.nav-collapse -->
                    </div>
                </div>
            </div>

            <div class="col-lg-8 col-lg-pull-2">
                <h1>Main Content</h1>
            </div>
        </div>
    </div>
</form>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js'></script>
</body>
</html>

CSS

body {
font-family:Tahoma;
}

.Header{
background-color:rgb(59,89,152);
min-height:3em;
color:white;
}

.HeadLeft{
font-family:'Times New Roman';
font-size:2.2em;
padding:0.1em;
}

.HeadRight{
font-family:Tahoma;
font-size:1.25em;
padding:0.1em;

}

.HeadRight a{
text-decoration:none;
color:rgb(255,255, 255);    
}

.LeftMenu{
box-shadow: 0 0.6250em 0.3125em #888888;
}

.LeftMenu h4{
background-color:rgb(240, 240, 240);
/*padding:0.1em 0;*/
}

.RightMenu{
box-shadow: 0 0.6250em 0.3125em #888888;
}

.RightMenu h4{
background-color:rgb(240, 240, 240);
/*padding:0.1em 0;*/
}

ul li{
/*padding:0.2em;*/
}

/* make sidebar nav vertical */ 
@media (min-width: 768px) {
.sidebar-nav .navbar .navbar-collapse {
padding: 0;
max-height: none;
}
.sidebar-nav .navbar ul {
float: none;
display: block;
}
.sidebar-nav .navbar li {
float: none;
display: block;
}
.sidebar-nav .navbar li a {
padding-top: 12px;
padding-bottom: 12px;
}
}

Bootstrap Dual Vertical Navbar同步工作

0 个答案: