引导两行导航栏（顶行中的链接切换底行中的导航栏），行之间的按钮
Posted
技术标签:
【中文标题】引导两行导航栏（顶行中的链接切换底行中的导航栏），行之间的按钮【英文标题】：bootstrap two row navbar (links in top row toggle navbar in bottom row), button between rows 【发布时间】：2018-05-24 08:36:40 【问题描述】：$('.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 */
.navwidth: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 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 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>我需要这样的两行导航栏（引导程序 3）。 当我单击顶部导航栏中的第一个链接（Nav-A-1）时 - 在底部导航栏中，我看到了第一个链接列表（Nav-B-1 Nav-B-2 Nav-B-3 等）。当我单击顶部导航栏中的第二个链接（Nav-A-2）时 - 我看到底部导航栏中的第二个链接列表（Nav-C-1 Nav-C-2 Nav-C-3 等）。它就像一个标签。第一个“标签”桅杆处于活动状态。
LG、MD、SM +-------------------------------------------------- -------------------------------------------------- ----------------------------------------+ | . . . . . . . . . . .|导航-A-1。 . .导航-A-2 。 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .| |网站标志|------------------------------------------------------------ ------------------------------------------------|按钮 |--+ | . . . . . . . . . . .|导航-B-1。 .导航-B-2 。 .导航-B-3。 .导航-B-4 。 .搜索图标。 . . . . . . . . . . . . . . . . . | +-------------------------------------------------- -------------------------------------------------- ----------------------------------------+ XS +-------------------------------------------------- --------+ | . . . . . . . . . . . . | . . . . . . . . . . | . . . . . . . . . . .| | .汉堡包 。 .|网站标志 |搜索图标 | | . . . . . . . . . . . . | . . . . . . . . . . | . . . . . . . . . . .| +-------------------------------------------------- --------+
【问题讨论】：
超级混乱，能不能简单点。Nav-A-*和Nav-B-*有什么区别？
格式有些问题，抱歉)
也许可以在 jsfiddle 或一些屏幕截图中显示您正在尝试做什么？
我找到了这个bootply.com/Axbt2Y0LIQ 所以我需要在左边有一个徽标，并在上下两行之间添加一个按钮。但是我怎样才能采用 XS 模式（汉堡包 - 徽标 - 搜索图标）？
【参考方案1】：
我找到了解决方案。我使用导航药丸，没有 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 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 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">Send a friend</a>
</div>
</div>
</div>
<!--navbar -->
</header>【讨论】：
以上是关于引导两行导航栏（顶行中的链接切换底行中的导航栏），行之间的按钮的主要内容，如果未能解决你的问题，请参考以下文章