Html 带非画布菜单的引导导航栏_Html_Css_Twitter Bootstrap

Html 带非画布菜单的引导导航栏

html css twitter-bootstrap

Html 带非画布菜单的引导导航栏,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,在我的仪表板示例中，引导导航栏菜单位于左菜单列的顶部，如下面的代码预览所示更新：此链接现在已使用我的答案中的新代码更新我想做的是让导航栏位于列左侧栏的边缘，并打开和关闭正确的宽度当前，菜单在导航栏下方打开和关闭问题：如何使导航栏位于侧边栏的边缘而不是在顶部，以相同的宽度打开和关闭

在我的仪表板示例中，引导导航栏菜单位于左菜单列的顶部，如下面的代码预览所示

更新：此链接现在已使用我的答案中的新代码更新

我想做的是让导航栏位于列左侧栏的边缘，并打开和关闭正确的宽度
当前，菜单在导航栏下方打开和关闭
问题：如何使导航栏位于侧边栏的边缘而不是在顶部，以相同的宽度打开和关闭<我已经试过了将导航栏放在内容div的一侧，但运气不佳

HTML

<div id="column-left">

<ul id="menu">

<li>
<a href="#"><i class="fa fa-dashboard fa-fw"></i> <span>Dashboard</span></a>
</li>

<li>
<a href="#"><i class="fa fa-bar-chart"></i> <span>Single Link</span></a>
</li>  

<li>
<a class="parent"><i class="fa fa-cog fa-fw"></i> <span>Multilevel Menu</span></a>
<ul>

<li><a href="">Link 1</a></li>

<li><a class="parent">Sub Multilevel Menu 1</a>
<ul>
<li><a href="">Sub Menu Link 1a</a></li>
<li><a href="">Sub Menu Link 1b</a></li>
</ul>
</li>

<li><a class="parent">Sub Multilevel Menu 2</a>
<ul>
<li><a href="#">Sub Menu Link 2a</a></li>
<li><a href="#">Sub Menu Link 2b</a></li>
<li><a href="#">Sub Menu Link 2c</a></li>
</ul>
</li>

</ul>
</li><!-- System -->
</ul>   
</div>

<div id="content">
<div class="main">
<div class="container-fluid">

<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top navbar-shadow">
<div class="navbar-header">
<button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a type="button" id="button-menu" class="navbar-brand"><i class="fa fa-indent fa-lg"></i></a>
<a href="#" class="navbar-brand">Project name</a>
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <span class="caret"></span></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 class="divider" role="separator"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="../navbar/">Default</a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li>
</ul>
</div><!--/.nav-collapse -->
</nav>


</div>
</div>
</div>

<div id="column-left">

<ul id="menu">

<li>
<a href="#"><i class="fa fa-dashboard fa-fw"></i> <span>Dashboard</span></a>
</li>

<li>
<a href="#"><i class="fa fa-bar-chart"></i> <span>Single Link</span></a>
</li>  

<li>
<a class="parent"><i class="fa fa-cog fa-fw"></i> <span>Multilevel Menu</span></a>
<ul>

<li><a href="">Link 1</a></li>

<li><a class="parent">Sub Multilevel Menu 1</a>
<ul>
<li><a href="">Sub Menu Link 1a</a></li>
<li><a href="">Sub Menu Link 1b</a></li>
</ul>
</li>

<li><a class="parent">Sub Multilevel Menu 2</a>
<ul>
<li><a href="#">Sub Menu Link 2a</a></li>
<li><a href="#">Sub Menu Link 2b</a></li>
<li><a href="#">Sub Menu Link 2c</a></li>
</ul>
</li>

</ul>
</li><!-- System -->
</ul>   
</div>

<div id="content">


<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-shadow">
<div class="container-fluid">
<div class="navbar-header">
<button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a type="button" id="button-menu" class="navbar-brand"><i class="fa fa-indent fa-lg"></i></a>
<a href="#" class="navbar-brand">Project name</a>
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <span class="caret"></span></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 class="divider" role="separator"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="../navbar/">Default</a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>


<div class="container-fluid">

</div>


</div>
</div>

问题已解决。

更新的代码笔预览

问题是导航栏已经修好了，所以一直都在上面

我已从

body{}

形象

CSS

@import url(//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=latin,cyrillic-ext,greek-ext,vietnamese);

/* Global */
body {
    /*height: 100%;*/
    margin: 0;
    /*min-height: 100% !important;*/
    font-family: 'Open Sans', sans-serif;
    overflow-x: hidden;
    padding-top: 70px;
    width: 100%;
    background-color: #eee;
}

a,
a:hover, 
a:focus {
    cursor: pointer;
    text-decoration: none;
}

tr:hover a.dashboard-user:after {
    font-family: FontAwesome;
    content: "\f044";
    font-size: 14px;
}

/* fix for bootstrap hidden and visible */
span.hidden-xs, span.hidden-sm, span.hidden-md, span.hidden-lg {
    display: inline;
}

/* Layout  */

.container-fluid {
    padding-left: 20px;
    padding-right: 20px;
}

#content {
    padding-bottom: 40px;
    transition: all 0.3s;
}

/* Column Left  */

#column-left {
    width: 50px;
    min-height: 100%;
    background-color: #242424;
    top: 0px;
    position: fixed;
    padding-top: 70px;
    z-index: 10;
    transition: all 0.3s;
}

#column-left:hover{
  width: 250px;
}


#column-left + #content {
    margin-left: 50px;
}

#column-left + #content + #footer {
    margin-left: 50px;
}

@media (max-width: 767px) {
    #column-left {
        overflow: hidden;
        display: none;
    }

    #column-left + #content {
        margin-left: 0;
    }

    #column-left + #content + #footer {
        margin-left: 0;
    }

}

/* Column Left Active */

#column-left.active {
    width: 235px;
    display: block;
}

@media (min-width: 768px) {

#column-left.active {
    overflow: auto;
}

#column-left.active + #content {
    margin-left: 235px;
}

#column-left.active + #content + #footer {
    margin-left: 235px;
}

}

@media (max-width: 767px) {

    #column-left.active + #content {
        position: relative;
        left: 235px;
    }

    #column-left.active + #content + #footer {
        position: relative;
        left: 235px;
    }

}

#column-left.active {
    width: 235px;
}

#column-left.active #menu li i {
    font-size: 14px;
}

#column-left.active #menu > li > a > span {
    display: inline;
}

#column-left.active #menu > li > ul {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    visibility: visible;
}

/* Top Navbar */

.menu {
    background: #eeeeee none repeat scroll 0 0;
}

.navbar {
    background-color: #fff !important;
    border: 0 none;
    border-radius: 0;
    color: #666;
    margin-bottom: 0;
}

.navbar.navbar-shadow {
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.08), 0 2px 0 0 rgba(0, 0, 0, 0.02);
}

#button-menu {
    display: inline-block;
    cursor: pointer;
    color: #6D6D6D;
}


@media (max-width: 640px) {
    .navbar-brand {
        font-size: 14px;
        padding: 15px 7px;
    }
}

.profile {
    display: none;
}

#column-left.active .profile {
    display: block;
    padding-left: 15px;
    border-bottom: 1px solid #2d2d2d;
    padding-bottom: 25px;
}

.profile .media-left img {
    border: 2px solid #888;
    border-radius: 50%;
    max-width: 40px;
}

/* Sidebar Menu */

#menu, 
#menu ul, 
#menu li {
    padding: 0;
    margin: 0;
    min-height: 100%;
    list-style: none;
}

#menu {
    margin-bottom: 25px;
}

#menu > li {
    position: relative;
}

#menu li a {
    text-decoration: none;
    display: block;
    padding: 10px;
    cursor: pointer;
    color: #aaaaaa;
    border-bottom: 1px solid #2d2d2d;
}

#menu li a i {
    color: rgba(170, 170, 170, 0.7);
    font-size: 16px;
}

#menu > li > a {
    color: #aaaaaa;
    font-size: 14px;    
    padding-left: 13px;
}

#menu > li > a:hover {
    background-color: #444444;
}

#menu > li > a > span {
    display: none;
    margin-left: 8px;
}

#menu li li a {
    border-bottom: none !important;
}

#menu li li a:hover {
    color: #aaaaaa;
    background-color: #1e1e1e;
}

/*
#menu li li a:before {
    content: "\f101";
    font-size: 14px;
    font-family: FontAwesome;
    margin-left: 10px;
    margin-right: 10px;
    transition: margin ease 0.5s;   
}
*/
#menu li li a:hover:before {
    margin-right: 20px;
}

#menu > li.active > a {
    color: #aaaaaa;
    background: #242424;
}

#menu li.active li a {
    color: #aaaaaa;
}

#menu li li.active > a:last-child {
    color: #aaaaaa;
}

#menu li li.active a:last-child:before {
    margin-left: 20px;
    margin-right: 10px;
}

#menu > li > ul {
    position: absolute;
    left: 50px;
    top: 0px;
    width: 210px;
    background-color: #313131;
    visibility: hidden;
}

#menu li ul {
    overflow: hidden;
}

#menu li li a.parent:after, #column-left.active #menu > li a.parent:after {
    font-family: FontAwesome;
    content: "\f105";
    float: right;
    margin-right: 8px;
}

#menu li li.open > a.parent:after, #column-left.active #menu > li.open > a.parent:after {
    font-family: FontAwesome;
    content: "\f107";
    float: right;
    margin-right: 8px;
}

#menu li ul a {
    padding-left: 20px;
}

#menu li li ul a {
    padding-left: 40px;
}

#menu li li li ul a {
    padding-left: 60px;
}

#menu li li li li ul a {
    padding-left: 60px;
}

#menu li li li a.parent:after, #column-left.active #menu > li a.parent:after {
    font-family: FontAwesome;
    content: "\f105";
    float: right;
    margin-right: 8px;
}

#menu li li li.open > a.parent:after, #column-left.active #menu > li.open > a.parent:after {
    font-family: FontAwesome;
    content: "\f107";
    float: right;
    margin-right: 8px;
}

#menu li ul li a.parent:after, #column-left.active #menu > li ul li a.parent:after {
    font-family: FontAwesome;
    content: "\f105";
    float: right;
    margin-right: 8px;
}

#menu li ul li.open > a.parent:after, #column-left.active #menu > li ul li.open > a.parent:after {
    font-family: FontAwesome;
    content: "\f107";
    float: right;
    margin-right: 8px;
}

@import url(//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=latin,cyrillic-ext,greek-ext,vietnamese);

body {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    overflow-x: hidden;
    width: 100%;
    background-color: #eee;
}

a,
a:hover, 
a:focus {
    cursor: pointer;
    text-decoration: none;
}

tr:hover a.dashboard-user:after {
    font-family: FontAwesome;
    content: "\f044";
    font-size: 14px;
}

/* fix for bootstrap hidden and visible */
span.hidden-xs, span.hidden-sm, span.hidden-md, span.hidden-lg {
    display: inline;
}

/* Layout  */

.container-fluid {
    padding-left: 20px;
    padding-right: 20px;
}

#content {
    padding-bottom: 40px;
    transition: all 0.3s;
}

/* Column Left  */

#column-left {
    width: 50px;
    min-height: 100%;
    background-color: #242424;
    top: 0px;
    position: fixed;
    padding-top: 70px;
    z-index: 10;
    transition: all 0.3s;
}

#column-left:hover{
  width: 250px;
}


#column-left + #content {
    margin-left: 50px;
}

#column-left + #content + #footer {
    margin-left: 50px;
}

@media (max-width: 767px) {
    #column-left {
        overflow: hidden;
        display: none;
    }

    #column-left + #content {
        margin-left: 0;
    }

    #column-left + #content + #footer {
        margin-left: 0;
    }

}

/* Column Left Active */

#column-left.active {
    width: 235px;
    display: block;
}

@media (min-width: 768px) {

#column-left.active {
    overflow: auto;
}

#column-left.active + #content {
    margin-left: 235px;
}

#column-left.active + #content + #footer {
    margin-left: 235px;
}

}

@media (max-width: 767px) {

    #column-left.active + #content {
        position: relative;
        left: 235px;
    }

    #column-left.active + #content + #footer {
        position: relative;
        left: 235px;
    }

}

#column-left.active {
    width: 235px;
}

#column-left.active #menu li i {
    font-size: 14px;
}

#column-left.active #menu > li > a > span {
    display: inline;
}

#column-left.active #menu > li > ul {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    visibility: visible;
}

/* Top Navbar */

.menu {
    background: #eeeeee none repeat scroll 0 0;
}

.navbar {
    background-color: #fff !important;
    border: 0 none;
    border-radius: 0;
    color: #666;
    margin-bottom: 0;
}

.navbar.navbar-shadow {
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.08), 0 2px 0 0 rgba(0, 0, 0, 0.02);
}

#button-menu {
    display: inline-block;
    cursor: pointer;
    color: #6D6D6D;
}


@media (max-width: 640px) {
    .navbar-brand {
        font-size: 14px;
        padding: 15px 7px;
    }
}

.profile {
    display: none;
}

#column-left.active .profile {
    display: block;
    padding-left: 15px;
    border-bottom: 1px solid #2d2d2d;
    padding-bottom: 25px;
}

.profile .media-left img {
    border: 2px solid #888;
    border-radius: 50%;
    max-width: 40px;
}

/* Sidebar Menu */

#menu, 
#menu ul, 
#menu li {
    padding: 0;
    margin: 0;
    min-height: 100%;
    list-style: none;
}

#menu {
    margin-bottom: 25px;
}

#menu > li {
    position: relative;
}

#menu li a {
    text-decoration: none;
    display: block;
    padding: 10px;
    cursor: pointer;
    color: #aaaaaa;
    border-bottom: 1px solid #2d2d2d;
}

#menu li a i {
    color: rgba(170, 170, 170, 0.7);
    font-size: 16px;
}

#menu > li > a {
    color: #aaaaaa;
    font-size: 14px;    
    padding-left: 13px;
}

#menu > li > a:hover {
    background-color: #444444;
}

#menu > li > a > span {
    display: none;
    margin-left: 8px;
}

#menu li li a {
    border-bottom: none !important;
}

#menu li li a:hover {
    color: #aaaaaa;
    background-color: #1e1e1e;
}

/*
#menu li li a:before {
    content: "\f101";
    font-size: 14px;
    font-family: FontAwesome;
    margin-left: 10px;
    margin-right: 10px;
    transition: margin ease 0.5s;   
}
*/
#menu li li a:hover:before {
    margin-right: 20px;
}

#menu > li.active > a {
    color: #aaaaaa;
    background: #242424;
}

#menu li.active li a {
    color: #aaaaaa;
}

#menu li li.active > a:last-child {
    color: #aaaaaa;
}

#menu li li.active a:last-child:before {
    margin-left: 20px;
    margin-right: 10px;
}

#menu > li > ul {
    position: absolute;
    left: 50px;
    top: 0px;
    width: 210px;
    background-color: #313131;
    visibility: hidden;
}

#menu li ul {
    overflow: hidden;
}

#menu li li a.parent:after, #column-left.active #menu > li a.parent:after {
    font-family: FontAwesome;
    content: "\f105";
    float: right;
    margin-right: 8px;
}

#menu li li.open > a.parent:after, #column-left.active #menu > li.open > a.parent:after {
    font-family: FontAwesome;
    content: "\f107";
    float: right;
    margin-right: 8px;
}

#menu li ul a {
    padding-left: 20px;
}

#menu li li ul a {
    padding-left: 40px;
}

#menu li li li ul a {
    padding-left: 60px;
}

#menu li li li li ul a {
    padding-left: 60px;
}

#menu li li li a.parent:after, #column-left.active #menu > li a.parent:after {
    font-family: FontAwesome;
    content: "\f105";
    float: right;
    margin-right: 8px;
}

#menu li li li.open > a.parent:after, #column-left.active #menu > li.open > a.parent:after {
    font-family: FontAwesome;
    content: "\f107";
    float: right;
    margin-right: 8px;
}

#menu li ul li a.parent:after, #column-left.active #menu > li ul li a.parent:after {
    font-family: FontAwesome;
    content: "\f105";
    float: right;
    margin-right: 8px;
}

#menu li ul li.open > a.parent:after, #column-left.active #menu > li ul li.open > a.parent:after {
    font-family: FontAwesome;
    content: "\f107";
    float: right;
    margin-right: 8px;
}

HTML

<div id="column-left">

<ul id="menu">

<li>
<a href="#"><i class="fa fa-dashboard fa-fw"></i> <span>Dashboard</span></a>
</li>

<li>
<a href="#"><i class="fa fa-bar-chart"></i> <span>Single Link</span></a>
</li>  

<li>
<a class="parent"><i class="fa fa-cog fa-fw"></i> <span>Multilevel Menu</span></a>
<ul>

<li><a href="">Link 1</a></li>

<li><a class="parent">Sub Multilevel Menu 1</a>
<ul>
<li><a href="">Sub Menu Link 1a</a></li>
<li><a href="">Sub Menu Link 1b</a></li>
</ul>
</li>

<li><a class="parent">Sub Multilevel Menu 2</a>
<ul>
<li><a href="#">Sub Menu Link 2a</a></li>
<li><a href="#">Sub Menu Link 2b</a></li>
<li><a href="#">Sub Menu Link 2c</a></li>
</ul>
</li>

</ul>
</li><!-- System -->
</ul>   
</div>

<div id="content">
<div class="main">
<div class="container-fluid">

<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top navbar-shadow">
<div class="navbar-header">
<button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a type="button" id="button-menu" class="navbar-brand"><i class="fa fa-indent fa-lg"></i></a>
<a href="#" class="navbar-brand">Project name</a>
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <span class="caret"></span></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 class="divider" role="separator"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="../navbar/">Default</a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li>
</ul>
</div><!--/.nav-collapse -->
</nav>


</div>
</div>
</div>

<div id="column-left">

<ul id="menu">

<li>
<a href="#"><i class="fa fa-dashboard fa-fw"></i> <span>Dashboard</span></a>
</li>

<li>
<a href="#"><i class="fa fa-bar-chart"></i> <span>Single Link</span></a>
</li>  

<li>
<a class="parent"><i class="fa fa-cog fa-fw"></i> <span>Multilevel Menu</span></a>
<ul>

<li><a href="">Link 1</a></li>

<li><a class="parent">Sub Multilevel Menu 1</a>
<ul>
<li><a href="">Sub Menu Link 1a</a></li>
<li><a href="">Sub Menu Link 1b</a></li>
</ul>
</li>

<li><a class="parent">Sub Multilevel Menu 2</a>
<ul>
<li><a href="#">Sub Menu Link 2a</a></li>
<li><a href="#">Sub Menu Link 2b</a></li>
<li><a href="#">Sub Menu Link 2c</a></li>
</ul>
</li>

</ul>
</li><!-- System -->
</ul>   
</div>

<div id="content">


<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-shadow">
<div class="container-fluid">
<div class="navbar-header">
<button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a type="button" id="button-menu" class="navbar-brand"><i class="fa fa-indent fa-lg"></i></a>
<a href="#" class="navbar-brand">Project name</a>
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <span class="caret"></span></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 class="divider" role="separator"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="../navbar/">Default</a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>


<div class="container-fluid">

</div>


</div>
</div>





















切换导航










导航标题