Bootstrap 3.如何使两行导航栏折叠？

Question

 $('.collapse').on('shown.bs.collapse', function (e) { $('.collapse').not(this).removeClass('in'); }); $('[data-toggle=collapse]').click(function (e) { $('[data-toggle=collapse]').parent('li').removeClass('active'); $(this).parent('li').toggleClass('active'); });

 header { background-color:#3e3e3e; } header .logodesc img { padding-top: 30px; } header .btn-prihlasit-cont{ padding-top:34px; } header .prihlasit { padding: 7px 14px 7px 16px; color: #404040; font-size: 12px; font-weight: bold; text-transform:uppercase; text-align: center; background-color: #F2F2F2; min-width: 210px; } .navbar {margin-bottom:0;} .navbar-inverse{ background-color:#3e3e3e; border:none; } .navbar-inverse .navbar-nav>li>a { color:#fff; } .navbar-inverse .navbar-toggle { border-color:transparent; cursor:pointer; color:#fff; } .navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:active, .navbar-inverse .navbar-nav>li>a:focus { color:#626262; } .navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover { color:#626262; background-color: transparent; } .navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover { background-color: transparent; color:#fff; } #topmenu { border-bottom:solid 1px #626262; border-radius:0; } #topmenu .dropdown, #topmenu .dropup{ background: url(../img/dropdbg.png) top right no-repeat; } #topmenu > ul > li:nth-child(2){ background: none; } @media (max-width: 767px) { /* XS */ .nav{width:100%;} .navbar-brand-centered { display: inline-block; left: 0; right: 0; margin:0; float:none; } .navbar-header{ text-align:center; } #topmenu .dropdown, #topmenu .dropup{ background:none; } }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="robots" content="noindex, nofollow"> <title>Two rows navbar</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="css/reset.css" rel="stylesheet"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" > <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="css/style.css" rel="stylesheet" id="style"> </head> <body> <header> <div class="container"> <div class="row"> <div class="col-lg-2 col-sm-2 hidden-xs"> <a class="logodesc" href="#"> <img alt="logo" width="155" height="52" src="img/logo.png" class="img-responsive"> </a> </div> <div class="col-lg-8 col-sm-8 col-xs-12 paddR0"> <div class="navbar-header navbar-inverse hidden-lg hidden-md hidden-sm"> <button class = "navbar-toggle pull-left" data-toggle = "collapse" data-target = "#nav-header-links-collapse"> <span class = "icon-bar"></span> <span class = "icon-bar"></span> <span class = "icon-bar"></span> </button> <a class="navbar-brand navbar-brand-centered" href="#" data-toggle = "collapse" data-target = "#nav-header-logo-collapse"> <img alt="logo" width="100" height="31" src="img/logo.png" class="img-responsive"> </a> <a class = "navbar-toggle pull-right glyphicon glyphicon-search" data-toggle = "collapse" data-target = "#nav-header-search-collapse"> </a> </div> <nav class="navbar navbar-inverse" role="navigation" id="topmenu"> <ul class="nav navbar-nav"> <li class="dropdown active"> <a href="#" data-toggle="collapse" data-target="#one">One</a> </li> <li class="dropdown"> <a href="#" data-toggle="collapse" data-target="#two">Two</a> </li> </ul> </nav> <nav class="navbar navbar-inverse" role="navigation" id="submenu"> <ul class="nav navbar-nav navbar-inverse collapse in" id="one"> <li><a href="#" id="">One sub 1</a></li> <li><a href="#" id="">One sub 2</a></li> <li><a href="#" id="">One sub 3</a></li> <li><a href="#" id="">One sub 4</a></li> <li><a class = "navbar-toggle glyphicon glyphicon-search" data-toggle = "collapse" data-target = "#nav-header-search-collapse"></a></li> </ul> <ul class="nav navbar-nav navbar-inverse collapse" id="two"> <li><a href="#" id="">Two sub 1</a></li> <li><a href="#" id="">Two sub 2</a></li> <li><a href="#" id="">Two sub 3</a></li> <li><a class = "navbar-toggle glyphicon glyphicon-search" data-toggle = "collapse" data-target = "#nav-header-search-collapse"></a> <form class="nav navbar-form" role="search" id="nav-header-search-collapse"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search" name="q"> <div class="input-group-btn"> <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> </div> </div> </form> </li> </ul> </nav> </div> <div class="col-lg-2 col-sm-2 hidden-xs paddL0 btn-prihlasit-cont"> <a href="#" class="btn prihlasit">Send a friend</a> </div> </div> </div> </header> </body> </html>

How I can make two rows navbar collapsed? 如何使两行导航栏折叠？ If I put the rows in the container with id="nav-header-links-collapse", it looks like collapsed, but not working good. 如果我将行放入id =“ nav-header-links-collapse”的容器中，则看起来好像已折叠，但效果不佳。 How do I show the search form when I click on the search icons (at the top and in the submenu)? 单击搜索图标（在顶部和子菜单中）时，如何显示搜索表单？ When you click the links in the top menu again, the bottom menu disappears. 当您再次单击顶部菜单中的链接时，底部菜单消失。
How to remove this bug? 如何清除这个错误？

You can see my code in a snippet. 您可以在代码段中看到我的代码。

Answer 1

I found solution. 我找到了解决方案。 I use nav-pills. 我用药丸。 Without javascript! 没有JavaScript！ :-) :-)

 header { background-color:#3e3e3e; } header .logodesc img { padding-top: 30px; } header .btn-prihlasit-cont{ padding-top:22px; } header .prihlasit { padding: 7px 14px 7px 16px; color: #404040; font-size: 12px; font-weight: bold; text-transform:uppercase; text-align: center; background-color: #F2F2F2; min-width: 210px; } .navbar {margin-bottom:0;} .navbar-inverse{ background-color:#3e3e3e; border:none; } .navbar-inverse .navbar-nav>li>a, .navbar-nav>li>a { color:#fff; } .navbar-inverse .navbar-toggle { border-color:transparent; cursor:pointer; color:#fff; } .navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:active, .navbar-inverse .navbar-nav>li>a:focus { color:#626262; } .navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover { color:#626262; background-color: transparent; } .navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover { background-color: transparent; color:#fff; } #nav-header-links-collapse{ width:100%; } .nav-pills { border-bottom: solid 1px #626262; } .nav-pills>li>a { color:#626262; } .nav>li>a:focus, .nav>li>a:hover{ color:#fff; background-color: #000; border-radius:0; } .nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover{ border-radius:0; background-color: transparent; } a.navbar-toggle.glyphicon.glyphicon-search { padding-top: 5px; padding-bottom: 5px; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="robots" content="noindex, nofollow"> <title>Promotional Columns - Bootsnipp.com</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="css/reset.css" rel="stylesheet"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" > <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="css/style.css" rel="stylesheet" id="style"> </head> <body> <header> <div class="container"> <div class="row"> <!--navbar --> <div class="col-lg-2 col-sm-2 hidden-xs"> <a class="logodesc" href="#"> <img alt="logo" width="155" height="52" src="img/logo.png" class="img-responsive"> </a> </div> <div class="col-lg-8 col-sm-8 col-xs-12 paddR0"> <div class="navbar-header navbar-inverse hidden-lg hidden-md hidden-sm"> <button class = "navbar-toggle pull-left" data-toggle = "collapse" data-target = "#nav-header-links-collapse"> <span class = "icon-bar"></span> <span class = "icon-bar"></span> <span class = "icon-bar"></span> </button> <a class="navbar-brand navbar-brand-centered" href="#" data-toggle = "collapse" data-target = "#nav-header-logo-collapse"> <img alt="logo" width="100" height="31" src="img/logo.png" class="img-responsive"> </a> <a class = "navbar-toggle pull-right glyphicon glyphicon-search" data-toggle = "collapse" data-target = "#nav-header-search-collapse"> </a> </div> <div class = "collapse navbar-collapse nav navbar-nav navbar-right" id="nav-header-links-collapse"> <ul class="nav nav-pills"> <li class="active"> <a href="#1a" data-toggle="tab">Overview</a> </li> <li><a href="#2a" data-toggle="tab">Using nav-pills</a> </li> </ul> <div class="tab-content clearfix"> <div class="tab-pane active" id="1a"> <ul class="nav navbar-nav navbar-inverse collapse in" id="one"> <li><a href="#" id="">One sub 1</a></li> <li><a href="#" id="">One sub 2</a></li> <li><a href="#" id="">One sub 3</a></li> <li><a href="#" id="">One sub 4</a></li> <li class="hidden-xs"><a class = "navbar-toggle glyphicon glyphicon-search" data-toggle = "collapse" data-target = "#nav-header-search-collapse"></a></li> </ul> </div> <div class="tab-pane" id="2a"> <ul class="nav navbar-nav navbar-inverse collapse in" id="two"> <li><a href="#" id="">One sub 11</a></li> <li><a href="#" id="">One sub 12</a></li> <li><a href="#" id="">One sub 13</a></li> <li><a href="#" id="">One sub 14</a></li> <li class="hidden-xs"><a class = "navbar-toggle glyphicon glyphicon-search" data-toggle = "collapse" data-target = "#nav-header-search-collapse"></a></li> </ul> </div> </div> </div> <form class="nav navbar-form collapse" role="search" id="nav-header-search-collapse"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search" name="q"> <div class="input-group-btn"> <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> </div> </div> </form> </div> <div class="col-lg-2 col-sm-2 hidden-xs paddL0 btn-prihlasit-cont"> <a href="#" class="btn prihlasit">Přihlásit do mojeID</a> </div> </div> </div> <!--navbar --> </header> </body> </html>

Bootstrap 3.如何使两行导航栏折叠？

问题描述

1 个解决方案

解决方案1
0 2017-12-15 14:03:14

Bootstrap 3.如何使两行导航栏折叠？

问题描述

1 个解决方案

解决方案1 0 2017-12-15 14:03:14

解决方案1
0 2017-12-15 14:03:14