分隔顶部导航栏和侧面导航栏
[英]Separating Top Nav bar and Side nav bar
问题描述
I have TOP nav bar with some menus and Side nav bar with some menus. 
我有一些菜单的顶部导航栏和一些菜单的侧面导航栏。 I given styling for the vertical nav bar , but it reflects to all the nav bar and gives me output like given in picture enter image description here 我为垂直导航栏指定了样式，但它会反映到所有导航栏，并给我输出如图片所示的效果，请在此处输入图像描述
Can anyone suggest me how to seperate the styling for the vertical menu.Vertical menus styling starts from @media 任何人都可以建议我如何分隔垂直菜单的样式。垂直菜单样式从@media开始
.top-color { background-color: aquamarine; margin-bottom: 0; } .firstmenu { margin-bottom: 0; } @media (min-width: 768px) { .navbar-collapse { height: auto; border-top: 0; box-shadow: none; max-height: none; padding-left: 0; padding-right: 0; } .navbar-collapse.collapse { display: block !important; width: auto !important; padding-bottom: 0; overflow: visible !important; } .navbar-collapse.in { overflow-x: visible; } .navbar { max-width: 300px; margin-right: 0; margin-left: 0; } .navbar-nav, .navbar-nav > li, .navbar-left, .navbar-right, .navbar-header { float: none !important; } .navbar-right .dropdown-menu { left: 0; right: auto; } .navbar-collapse .navbar-nav.navbar-right:last-child { margin-right: 0; } }
<title>Bootstrap Case</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar top-color"> <!--nav header Div--> <div class="container-fluid"> <div class="col-sm-1"><a class="navbar-head" style="text-decoration:none; color:white;" href="#"><h1>My Page</h1></a> </div> </div> </nav> <nav class="navbar navbar-inverse firstmenu"> <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="#">WebSiteName</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> </li> <li><a href="#">Page 2</a> </li> <li><a href="#">Page 3</a> </li> </ul> </div> </div> </nav> </body> </html> <nav class="navbar navbar-default" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link</a> </li> <li><a href="#">Link</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></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><a href="#">Separated link</a> </li> <li><a href="#">One more separated link</a> </li> </ul> </li> </ul> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></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><a href="#">Separated link</a> </li> </ul> </li> </ul> </div> <!-- /.navbar-collapse --> </nav>
1 个解决方案
解决方案1
0 已采纳 2016-04-29 10:26:58
.top-color { background-color: aquamarine; margin-bottom: 0; } .firstmenu { margin-bottom: 0; } .navbar-default .navbar-toggle { display: none ; } .navbar.navbar-default { float: left; width: 50%; } .navbar-default .collapse.navbar-collapse.navbar-ex1-collapse { display: block; float: left; width: 100%; } @media (min-width: 768px) { .navbar-collapse { height: auto; border-top: 0; box-shadow: none; max-height: none; padding-left: 0; padding-right: 0; } .navbar-collapse.collapse { display: block !important; width: auto !important; padding-bottom: 0; overflow: visible !important; } .navbar-collapse.in { overflow-x: visible; } .navbar { max-width: 300px; margin-right: 0; margin-left: 0; } .navbar-nav, .navbar-nav > li, .navbar-left, .navbar-right, .navbar-header { float: none !important; } .navbar-right .dropdown-menu { left: 0; right: auto; } .navbar-collapse .navbar-nav.navbar-right:last-child { margin-right: 0; } }
<title>Bootstrap Case</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <nav class="navbar top-color"> <!--nav header Div--> <div class="container-fluid"> <div class="col-sm-1"><a class="navbar-head" style="text-decoration:none; color:white;" href="#"><h1>My Page</h1></a> </div> </div> </nav> <nav class="navbar navbar-inverse firstmenu"> <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="#">WebSiteName</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> </li> <li><a href="#">Page 2</a> </li> <li><a href="#">Page 3</a> </li> </ul> </div> </div> </nav> </body> </html> <nav class="navbar navbar-default" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link</a> </li> <li><a href="#">Link</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></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><a href="#">Separated link</a> </li> <li><a href="#">One more separated link</a> </li> </ul> </li> </ul> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></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><a href="#">Separated link</a> </li> </ul> </li> </ul> </div> <!-- /.navbar-collapse --> </nav>
You can try this css: 您可以尝试以下CSS：
.navbar-default .navbar-toggle {
display: none ;
}
.navbar.navbar-default {
float: left;
width: 50%;
}
.navbar-default .collapse.navbar-collapse.navbar-ex1-collapse {
display: block;
float: left;
width: 100%;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
顶部导航栏中的自动边距？ - Automatic margins in top side nav bar?
动态侧面导航栏 - Dynamic Side Nav Bar
修复侧导航栏 - Fixing a side nav bar
滑动侧导航栏 - Sliding Side Nav Bar
导航栏贴在顶部 - Nav bar sticking to the top
顶部导航栏词缀 - Top nav bar affix
将导航栏顶部和导航栏侧面固定到屏幕上 - Make a nav-bar top and nav-bar side fixed to screen
如何使用粘性顶部导航，侧栏和页脚开发引导程序布局 - how to develop bootstrap layout with sticky top nav, side bar and footer
侧面导航栏不全高 - side nav bar not full height
Bootstrap Side导航栏问题 - Bootstrap Side nav bar issue
相关标签