[英]Bootstrap 3. How I can make two rows navbar collapsed?
$('.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>
如何使兩行導航欄折疊？ 如果我將行放入id =“ nav-header-links-collapse”的容器中，則看起來好像已折疊，但效果不佳。 單擊搜索圖標（在頂部和子菜單中）時，如何顯示搜索表單？ 當您再次單擊頂部菜單中的鏈接時，底部菜單消失。
如何清除這個錯誤？
您可以在代碼段中看到我的代碼。
我找到了解決方案。 我用葯丸。 沒有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更改顏色。（附加）
[英]How do you make it so the navbar is transparent then changes color using bootstrap 3. (Affix)
默認情況下，如果Bootstrap 3下拉菜單位於折疊的導航欄中，則如何使其處於打開狀態
[英]How to make a Bootstrap 3 dropdown menu open by default when it is inside a collapsed navbar
Bootstrap 4 導航欄折疊時無法更改 div 的填充（移動）
[英]Can't alter padding of a div when Bootstrap 4 navbar is collapsed (mobile)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.