Bootstrap 3. 如何让两行导航栏折叠? [英] 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 {背景色:#3e3e3e;}标题 .logodesc img {填充顶部:30px；}标题 .btn-prihlasit-cont{填充顶部:34px;}标题.prihlasit {填充:7px 14px 7px 16px；颜色:#404040；字体大小:12px；字体粗细:粗体；文本转换:大写；文本对齐:居中；背景色:#F2F2F2；最小宽度:210px；}.navbar {margin-bottom:0;}.navbar-inverse{背景色:#3e3e3e;边界:无；}.navbar-inverse .navbar-nav>li>a {颜色:#fff;}.navbar-inverse .navbar-toggle {边框颜色:透明；游标:指针；颜色:#fff;}.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:active, .navbar-inverse .navbar-nav>li>a:focus {颜色:#626262；}.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {颜色:#626262；背景色:透明；}.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {背景色:透明；颜色:#fff;}#顶部菜单 {边框底部:实心 1px #626262;边界半径:0;}#topmenu .dropdown, #topmenu .dropup{背景: url(../img/dropdbg.png) 右上角不重复；}#topmenu >升 >li:nth-child(2){背景:无；}@media (max-width: 767px) {/* XS */.nav{宽度:100%;}.navbar 以品牌为中心 {显示:内联块；左:0；右:0；保证金:0;浮动:无；}.navbar-header{文字对齐:居中；}#topmenu .dropdown, #topmenu .dropup{背景:无；}}<html lang="zh-cn"><头><meta charset="utf-8"><meta name="robots" content="noindex, nofollow"><title>两行导航栏</title><meta name="viewport" content="width=device-width, initial-scale=1"><link href="css/reset.css" rel="样式表"><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"><身体><标题><div class="容器"><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 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><a class="navbar-brand navbar-brand-centric" 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>
<nav class="navbar navbar-inverse" role="navigation" id="topmenu"><ul class="nav navbar-nav"><li class="下拉活动"><a href="#" data-toggle="collapse" data-target="#one">One</a>
</表单></nav>
<div class="col-lg-2 col-sm-2 hidden-xs paddL0 btn-prihlasit-cont"><a href="#" class="btn prihlasit">发送好友</a>
