我有一个基于Bootstrap的站点，屏幕左侧垂直对齐导航栏。在某些页面上，我希望页面内容将其自己的导航菜单水平放置在其自己内容的顶部。
问题：我的问题是对两个导航菜单使用引导类，内容区域中的水平导航菜单与主垂直导航菜单具有相同的高度。这不仅会在内容的导航菜单下方推送所有内容，而且会在更高的主导航菜单下方推送 - 当内容应位于主菜单旁边时！
问题： 如何将内容的导航菜单垂直放大以显示其内容，以便内容区域的完整内容将在主导航菜单旁边流动？
使用IE，FireFox和Chrome中的[F12]开发者工具，我看不出为什么两个导航菜单的高度同步的原因，因此我找不到打破同步的原因。
问题可以在JSFiddle上复制：https://jsfiddle.net/zazm460q/2/
（我正在为桌面应用程序开发，您可能需要扩展Result窗格以查看桌面布局而不是移动布局。）
以下是一些显示问题的简化HTML：
<div class="navbar navbar-inverse nabvar-static-top">
<div class="navbar-brand">
<a href="#">My App Logo</a>
</div>
</div>
<nav class="navbar-left navbar-inverse">
<ul class="nav nav-pill nav-stacked" id="main-nav">
<li class="panel">
<a href="#" data-toggle="collapse" data-target="#a" data-parent="#main-nav">menu item a</a>
<ul id="a" class="nav nav-pills nav-stacked collapse in">
<li>
<a href="#">a.1</a>
</li>
<li>
<a href="#">a.2</a>
</li>
<li>
<a href="#">a.3</a>
</li>
</ul>
</li>
<li class="panel">
<a href="#" data-toggle="collapse" data-target="#a" data-parent="#main-nav">menu item b</a>
<ul id="b" class="nav nav-pills nav-stacked collapse">
<li>
<a href="#">b.1</a>
</li>
<li>
<a href="#">b.2</a>
</li>
<li>
<a href="#">b.3</a>
</li>
</ul>
</li>
<li class="panel">
<a href="#" data-toggle="collapse" data-target="#a" data-parent="#main-nav">menu item c</a>
<ul id="c" class="nav nav-pills nav-stacked collapse">
<li>
<a href="#">c.1</a>
</li>
<li>
<a href="#">c.2</a>
</li>
<li>
<a href="#">c.3</a>
</li>
</ul>
</li>
<li class="panel">
<a href="#" data-toggle="collapse" data-target="#a" data-parent="#main-nav">menu item d</a>
<ul id="d" class="nav nav-pills nav-stacked collapse">
<li>
<a href="#">d.1</a>
</li>
<li>
<a href="#">d.2</a>
</li>
<li>
<a href="#">d.3</a>
</li>
</ul>
</li>
<li class="panel">
<a href="#" data-toggle="collapse" data-target="#a" data-parent="#main-nav">menu item e</a>
<ul id="e" class="nav nav-pills nav-stacked collapse">
<li>
<a href="#">e.1</a>
</li>
<li>
<a href="#">e.2</a>
</li>
<li>
<a href="#">e.3</a>
</li>
</ul>
</li>
</ul>
</nav>
<div id="body-content">
<div class="container">
<nav class="navbar-inner">
<ul class="nav nav-tabs">
<li><a data-toggle="tab" href="#tab-a">Tab A</a></li>
<li><a data-toggle="tab" href="#tab-b">Tab B</a></li>
<li class="active"><a data-toggle="tab" href="#tab-c">Tab C</a></li>
<li><a data-toggle="tab" href="#tab-d">Tab D</a></li>
</ul>
</nav>
<div class="tab-content">
<div class="tab-pane" id="tab-a">Tab-A Content Here
<p>
AAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAA
</p>
</div>
<div class="tab-pane" id="tab-b">
<h1>Tab-B Content Here</h1>
<p>
BBBBBBBBBBBBBB BBBBBBBBBB BBBBBBBBBBB BBBBBBBBB
</p>
</div>
<div class="tab-pane active" id="tab-c">
<h2>Tab-C Content Here</h2>
<p>
cccccc ccccccCCCCCCC CCCCCcccccc cccCCCCCCCCC CCCCCCCCcccc cccccc
</p>
</div>
<div class="tab-pane" id="tab-d">
<h3>Tab-D Content Here</h3>
<p>
DDDDDDDDDDD ddddddddddddd DDDDDDDDDDDDD ddddddddddd DDDDDDDDddd
</p>
</div>
</div>
</div>
</div>
<footer>My App</footer>
还有一些简化的CSS：
nav.navbar-left {
width: 140px;
}
#body-content {
margin-left: 150px;
}
footer {
width: 100%;
text-align: center;
}
答案 0 :(得分：0)
您可以解决此问题的一种方法是同时使用默认的Bootstrap Nav作为垂直（侧边栏导航）和水平（标准导航）导航。
然后为您的内容创建一个新的容器/包装类来偏移补充工具栏。
工作实例。
列中的标签内容示例： 使用FullPage并缩小浏览器宽度。
body {
padding-top: 50px;
}
@media screen and (min-width: 768px) {
.sidebar-nav .navbar-nav.navbar-left {
top: 50px;
bottom: 0;
left: 0;
width: 200px;
position: fixed;
background: #222;
}
.sidebar-nav .navbar-nav.navbar-left > li {
display: block;
float: none;
}
.sidebar-nav .navbar-nav .dropdown-menu > li > a {
color: #fff;
}
.sidebar-nav .navbar-nav .dropdown-menu > li > a:hover {
color: #222;
}
.sidebar-nav .navbar-nav .open .dropdown-menu {
position: static;
float: none;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.main-content {
margin-left: 200px;
}
}
@media screen and (min-width: 992px) {
.main-content .nav-tabs {
width: 100%;
border-bottom: 0;
}
.main-content .nav-tabs > li {
float: none;
display: table-cell;
width: 1%;
}
.main-content .nav-tabs > li > a {
margin: 0 0 5px 0;
text-align: center;
border-bottom: 1px solid #f3f3f3;
padding: 20px 0;
color: #222;
}
.main-content .nav-tabs > li > a:hover {
border-bottom-color: #f3f3f3;
background-color: #f3f3f3;
}
.main-content .nav-tabs > .active >a,
.main-content .nav-tabs > .active >a:focus,
.main-content .nav-tabs > .active >a:hover {
border: 1px solid #f3f3f3;
border-bottom-color: #fff;
background-color: #f3f3f3;
}
}
.main-content .nav-tabs > li > a {
border-radius: 0;
}
.content {
padding: 20px 0;
}
.tab-inner-content {
padding: 0 20px;
}<link href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css rel=stylesheet><nav class="navbar navbar-fixed-top navbar-inverse sidebar-nav"><div class=container-fluid><div class=navbar-header><button class="collapsed navbar-toggle"data-target=#bs-nav data-toggle=collapse 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 href=# class=navbar-brand>Brand</a></div><div class="collapse navbar-collapse"id=bs-nav><ul class="nav navbar-nav navbar-left"><li><a href=#>One</a><li><a href=#>Two</a><li><a href=#>Three</a><li class=dropdown><a href=# data-toggle=dropdown aria-expanded=false aria-haspopup=true class=dropdown-toggle role=button>Dropdown One<span class=caret></span></a><ul class=dropdown-menu><li><a href=#>One</a><li><a href=#>Two</a><li><a href=#>Three</a></ul><li><a href=#>Four</a><li class=dropdown><a href=# data-toggle=dropdown aria-expanded=false aria-haspopup=true class=dropdown-toggle role=button>Dropdown Two<span class=caret></span></a><ul class=dropdown-menu><li><a href=#>One</a><li><a href=#>Two</a><li><a href=#>Three</a></ul><li class=dropdown><a href=# data-toggle=dropdown aria-expanded=false aria-haspopup=true class=dropdown-toggle role=button>Dropdown Three<span class=caret></span></a><ul class=dropdown-menu><li><a href=#>One</a><li><a href=#>Two</a><li><a href=#>Three</a></ul><li class=dropdown><a href=# data-toggle=dropdown aria-expanded=false aria-haspopup=true class=dropdown-toggle role=button>Dropdown Four<span class=caret></span></a><ul class=dropdown-menu><li><a href=#>One</a><li><a href=#>Two</a><li><a href=#>Three</a></ul></ul><ul class="nav navbar-nav navbar-right"><li><a href=#>One</a><li><a href=#>Two</a><li><a href=#>Three</a></ul></div></div></nav><div class=main-content><div class=container-fluid><div class=row><div class=col-md-6><div class=content><ul class="nav nav-tabs"><li class=active><a href=#tab1 data-toggle=tab>Tab 1</a><li><a href=#tab2 data-toggle=tab>Tab 2</a><li><a href=#tab3 data-toggle=tab>Tab 3</a><li><a href=#tab4 data-toggle=tab>Tab 4</a><li><a href=#tab5 data-toggle=tab>Tab 5</a><li><a href=#tab6 data-toggle=tab>Tab 6</a></ul><div class="tab-content tab-inner-content"><div class="fade tab-pane active in"id=tab1><h3>Tab 1</h3><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<hr><img class=img-responsive src=http://placehold.it/850x425/000/fff><hr><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div><div class="fade tab-pane"id=tab2><h3>Tab 2</h3><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<hr><img class=img-responsive src=http://placehold.it/850x425/000/fff><hr></div><div class="fade tab-pane"id=tab3><h3>Tab 3</h3><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<hr><img class=img-responsive src=http://placehold.it/850x425/000/fff><hr></div><div class="fade tab-pane"id=tab4><h3>Tab 4</h3><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<hr><img class=img-responsive src=http://placehold.it/850x425/000/fff><hr></div><div class="fade tab-pane"id=tab5><h3>Tab 5</h3><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<hr><img class=img-responsive src=http://placehold.it/850x425/000/fff><hr></div><div class="fade tab-pane"id=tab6><h3>Tab 6</h3><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<hr><img class=img-responsive src=http://placehold.it/850x425/000/fff><hr></div></div></div></div><div class=col-md-6><div class=content><hr><img class=img-responsive src=http://placehold.it/850x425/000/fff><hr><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div></div></div></div></div><script src=https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js></script><script src=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js></script>
完整宽度标签内容： 使用FullPage并缩小浏览器宽度。
body {
padding-top: 50px;
}
@media screen and (min-width: 768px) {
.sidebar-nav .navbar-nav.navbar-left {
top: 50px;
bottom: 0;
left: 0;
width: 200px;
position: fixed;
background: #222;
}
.sidebar-nav .navbar-nav.navbar-left > li {
display: block;
float: none;
}
.sidebar-nav .navbar-nav .dropdown-menu > li > a {
color: #fff;
}
.sidebar-nav .navbar-nav .dropdown-menu > li > a:hover {
color: #222;
}
.sidebar-nav .navbar-nav .open .dropdown-menu {
position: static;
float: none;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.main-content {
margin-left: 200px;
}
.main-content .nav-tabs {
width: 100%;
border-bottom: 0;
}
.main-content .nav-tabs > li {
float: none;
display: table-cell;
width: 1%;
}
.main-content .nav-tabs > li > a {
margin: 0 0 5px 0;
text-align: center;
border-bottom: 1px solid #f3f3f3;
padding: 20px 0;
color: #222;
}
.main-content .nav-tabs > li > a:hover {
border-bottom-color: #f3f3f3;
background-color: #f3f3f3;
}
.main-content .nav-tabs > .active >a,
.main-content .nav-tabs > .active >a:focus,
.main-content .nav-tabs > .active >a:hover {
border: 1px solid #f3f3f3;
border-bottom-color: #fff;
background-color: #f3f3f3;
}
}
.main-content .nav-tabs > li > a {
border-radius: 0;
}
@media (max-width: 767px) {
.nav-content {
padding: 20px 0;
}
}
.tab-inner-content {
padding: 0 20px;
}<link href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css rel=stylesheet><nav class="navbar navbar-fixed-top navbar-inverse sidebar-nav"><div class=container-fluid><div class=navbar-header><button class="collapsed navbar-toggle"data-target=#bs-nav data-toggle=collapse 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 href=# class=navbar-brand>Brand</a></div><div class="collapse navbar-collapse"id=bs-nav><ul class="nav navbar-nav navbar-left"><li><a href=#>One</a><li><a href=#>Two</a><li><a href=#>Three</a><li class=dropdown><a href=# data-toggle=dropdown aria-expanded=false aria-haspopup=true class=dropdown-toggle role=button>Dropdown One<span class=caret></span></a><ul class=dropdown-menu><li><a href=#>One</a><li><a href=#>Two</a><li><a href=#>Three</a></ul><li><a href=#>Four</a><li class=dropdown><a href=# data-toggle=dropdown aria-expanded=false aria-haspopup=true class=dropdown-toggle role=button>Dropdown Two<span class=caret></span></a><ul class=dropdown-menu><li><a href=#>One</a><li><a href=#>Two</a><li><a href=#>Three</a></ul><li class=dropdown><a href=# data-toggle=dropdown aria-expanded=false aria-haspopup=true class=dropdown-toggle role=button>Dropdown Three<span class=caret></span></a><ul class=dropdown-menu><li><a href=#>One</a><li><a href=#>Two</a><li><a href=#>Three</a></ul><li class=dropdown><a href=# data-toggle=dropdown aria-expanded=false aria-haspopup=true class=dropdown-toggle role=button>Dropdown Four<span class=caret></span></a><ul class=dropdown-menu><li><a href=#>One</a><li><a href=#>Two</a><li><a href=#>Three</a></ul></ul><ul class="nav navbar-nav navbar-right"><li><a href=#>One</a><li><a href=#>Two</a><li><a href=#>Three</a></ul></div></div></nav><div class=main-content><div class=nav-content><ul class="nav nav-tabs"><li class=active><a href=#tab1 data-toggle=tab>Tab 1</a><li><a href=#tab2 data-toggle=tab>Tab 2</a><li><a href=#tab3 data-toggle=tab>Tab 3</a><li><a href=#tab4 data-toggle=tab>Tab 4</a><li><a href=#tab5 data-toggle=tab>Tab 5</a><li><a href=#tab6 data-toggle=tab>Tab 6</a></ul><div class="tab-content tab-inner-content"><div class="fade tab-pane active in"id=tab1><h3>Tab 1</h3><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div><div class="fade tab-pane"id=tab2><h3>Tab 2</h3><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div><div class="fade tab-pane"id=tab3><h3>Tab 3</h3><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div><div class="fade tab-pane"id=tab4><h3>Tab 4</h3><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div><div class="fade tab-pane"id=tab5><h3>Tab 5</h3><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div><div class="fade tab-pane"id=tab6><h3>Tab 6</h3><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div></div></div></div><script src=https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js></script><script src=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js></script>