如何使用Bootstrap移动导航栏？ [英] How to move a navbar with Bootstrap?
本文介绍了如何使用Bootstrap移动导航栏？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的网页上有两个 navbar 容器。
最初， navbar1 保持在 navbar2 的顶部，但是当我收缩页面和响应式样有效，我需要 navbar2 在 nabvar1之上
这里有一个例子：
以下是我需要的示例：
更新
CSS代码段
.navbar
{
margin-bottom：3px;
}
.btn-group
{
float：right;
}
/ **************************************** ************* /
/ ***************左侧自定义风格************ ** /
/ ****************************************** *********** /
.navbar-inner-left
{
padding-right：0;
padding-left：0;
}
.navbar-left {}
.navbar-left .nav> li
{
float：none;
}
.navbar-inner-left div> .nav-list
{
padding-left：0;
}
.navbar-inner-left.container-fluid> .brand
{
padding：10px 5px 10px 5px;
}
.navbar-inner-left
{
border：none;
background-color：#ffffff;
background-image：-moz-linear-gradient（top，＃ffffff，＃ffffff）;
background-image：-webkit-gradient（linear，0 0,0 100％，from（#ffffff），to（#ffffff））;
background-image：-webkit-linear-gradient（top，＃ffffff，＃ffffff）;
background-image：-o-linear-gradient（top，＃ffffff，＃ffffff）;
background-image：linear-gradient（to bottom，＃ffffff，＃ffffff）;
border：none;
filter：progid：DXImageTransform.Microsoft.gradient（startColorstr ='＃ffffffff'，endColorstr ='＃ffffffff'，GradientType = 0）;
-webkit-box-shadow：0;
-moz-box-shadow：0;
box-shadow：0;
}
/ **************************************** *********回应式搜寻************************************* *********************** /
/ ********************* **************************** RESPONSIVE STUFFF ******************** ****************************************** /
/ ** *********************************************** RESPONSIVE STUFFF * **************************************************** *********** /
/ ********************************* **************** RESPONSIVE STUFFF ******************************** ****************************** /
/ ************** *********************************** RESPONSIVE STUFFF ************* ************************************************* /
/ ********************************************* **** RESPONSIVE STUFFF ******************************************** ****************** /
@media（min-width：1200px）{}
@media（min-width：980px）{}
@media（max-width：979px）{}
@media（max-width：767px）{}
@media（min-width：768px）and（max-width：979px）
{
.navbar-left .btn-navbar
{
margin-right：-15px;
}
.navbar-inner-left .container-fluid> .brand
{
float：left;
}
}
@media（max-width：767px）and（min-width：480px）
{
.nav-collapse .nav> li> a，.nav-collapse。dropdown-menu a
{
padding-left：30px;
}
.navbar-inner-left .container-fluid> .brand
{
padding-left：30px;
}
.navbar-inner-left .nav-list> .nav-header
{
padding-left：20px;
}
.navbar-left .btn-navbar
{
margin-right：26px;
}
}
@media（max-width：480px）
{
.nav-collapse .nav> li> a，.nav-collapse。dropdown-menu a
{
padding-left：30px;
}
.navbar-inner-left.container-fluid> .brand
{
padding-left：30px;
}
.navbar-inner-left .nav-list> .nav-header
{
padding-left：20px;
}
.navbar-left .btn-navbar
{
margin-right：26px;
}
}
HTML代码段
< div class =container-fluid>
< div class =row-fluid>
< div class =span2>
< img alt =140x140src =http://lorempixel.com/140/140//>
< div class =navbar navbar-left>
< div class =navbar-inner navbar-inner-left>
< div class =container-fluid>
< a data-target =。navbar-responsive-collapsedata-toggle =collapseclass =btn btn-navbar>
< span class =icon-bar>< / span>< span class =icon-bar>< / span>< span class =icon-bar>
< / span>< / a>< a href =＃class =brand>主菜单< / a>
< div class =nav-collapse collapse navbar-responsive-collapse>
< ul class =nav nav-list>
< li class =nav-header>列表标题< / li>
< li>< a href =＃>首页< / a> < / li>
< li>< a href =＃>图库< / a> < / li>
< li>< a href =＃>应用程式< / a> < / li>
< li class =nav-header>另一个列表标题< / li>
< li>< a href =＃>个人资料< / a> < / li>
< li>< a href =＃>设置< / a> < / li>
< li class =divider>< / li>
< li>< a href =＃>说明< / a> < / li>
< / ul>
< / div>
< / div>
< / div>
< / div>
< / div>
< div class =span10>
< div class =navbar>
< div class =navbar-inner>
< div class =container-fluid>
< a data-target =。navbar-responsive-collapsedata-toggle =collapseclass =btn btn-navbar>
< span class =icon-bar>< / span>< span class =icon-bar>< / span>< span class =icon-bar>
< / span>< / a>< a href =＃class =brand> Title< / a>
< div class =nav-collapse collapse navbar-responsive-collapse>
< ul class =nav>
< li class =dropdown>< a data-toggle =dropdownclass =dropdown-togglehref =＃>下拉< strong
class =caret >< / strong>< / a>
< ul class =dropdown-menu>
< li>< a href =＃>操作< / a> < / li>
< li>< a href =＃>另一个操作< / a> < / li>
< li>< a href =＃>这里还有其他内容< / a> < / li>
< li class =divider>< / li>
< li class =nav-header>导航标题< / li>
< li>< a href =＃>分隔的链接< / a> < / li>
< li>< a href =＃>一个单独的链接< / a> < / li>
< / ul>
< / li>
< li class =dropdown>< a data-toggle =dropdownclass =dropdown-togglehref =＃>下拉< strong
class =caret >< / strong>< / a>
< ul class =dropdown-menu>
< li>< a href =＃>操作< / a> < / li>
< li>< a href =＃>另一个操作< / a> < / li>
< li>< a href =＃>这里还有其他内容< / a> < / li>
< li class =divider>< / li>
< li class =nav-header>导航标题< / li>
< li>< a href =＃>分隔的链接< / a> < / li>
< li>< a href =＃>一个单独的链接< / a> < / li>
< / ul>
< / li>
< li class =dropdown>< a data-toggle =dropdownclass =dropdown-togglehref =＃>下拉< strong
class =caret >< / strong>< / a>
< ul class =dropdown-menu>
< li>< a href =＃>操作< / a> < / li>
< li>< a href =＃>另一个操作< / a> < / li>
< li>< a href =＃>这里还有其他内容< / a> < / li>
< li class =divider>< / li>
< li class =nav-header>导航标题< / li>
< li>< a href =＃>分隔的链接< / a> < / li>
< li>< a href =＃>一个单独的链接< / a> < / li>
< / ul>
< / li>
< li class =dropdown>< a data-toggle =dropdownclass =dropdown-togglehref =＃>下拉< strong
class =caret >< / strong>< / a>
< ul class =dropdown-menu>
< li>< a href =＃>操作< / a> < / li>
< li>< a href =＃>另一个操作< / a> < / li>
< li>< a href =＃>这里还有其他内容< / a> < / li>
< li class =divider>< / li>
< li class =nav-header>导航标题< / li>
< li>< a href =＃>分隔的链接< / a> < / li>
< li>< a href =＃>一个单独的链接< / a> < / li>
< / ul>
< / li>
< / ul>
< ul class =nav pull-right>
< li>< a href =＃>链接< / a> < / li>
< li class =divider-vertical>< / li>
< li class =dropdown>< a data-toggle =dropdownclass =dropdown-togglehref =＃>下拉< strong
class =caret >< / strong>< / a>
< ul class =dropdown-menu>
< li>< a href =＃>操作< / a> < / li>
< li>< a href =＃>另一个操作< / a> < / li>
< li>< a href =＃>这里还有其他内容< / a> < / li>
< li class =divider>< / li>
< li>< a href =＃>分隔的链接< / a> < / li>
< / ul>
< / li>
< / ul>
< / div>
< / div>
< / div>
< / div>
< div class =btn-group>
< button class =btntype =button>
< em class =icon-align-left>< / em>
< / button>
< button class =btntype =button>
< em class =icon-align-center>< / em>
< / button>
< button class =btntype =button>
< em class =icon-align-right>< / em>
< / button>
< button class =btntype =button>
< em class =icon-align-justify>< / em>
< / button>
< / div>
< / div>
< / div>
< / div>
感谢提前！
方案
.navbar-left {
position：relative;
top：88px;
}
.navbar-inner {
position：relative;
top：-44px;
}
并将其放在媒体查询块中， / p>
I have two navbar containers on my page.
Originally, navbar1 stays on top of navbar2, but after I shrink the page and the responsive style come to have effect, I need navbar2 to be on top of nabvar1
Here's a link to my demo: click
Here's an example of what I have:
Here's an example of what I need:
Update
CSS Code Snippet
.navbar
{
margin-bottom: 3px;
}
.btn-group
{
float: right;
}
/*****************************************************/
/*************** LEFT NAV CUSTOM STYLES **************/
/*****************************************************/
.navbar-inner-left
{
padding-right: 0;
padding-left: 0;
}
.navbar-left{}
.navbar-left .nav > li
{
float: none;
}
.navbar-inner-left div > .nav-list
{
padding-left: 0;
}
.navbar-inner-left .container-fluid > .brand
{
padding: 10px 5px 10px 5px;
}
.navbar-inner-left
{
border: none;
background-color: #ffffff;
background-image: -moz-linear-gradient(top,#ffffff,#ffffff);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#ffffff),to(#ffffff));
background-image: -webkit-linear-gradient(top,#ffffff,#ffffff);
background-image: -o-linear-gradient(top,#ffffff,#ffffff);
background-image: linear-gradient(to bottom,#ffffff,#ffffff);
border: none;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffffffff',GradientType=0);
-webkit-box-shadow: 0;
-moz-box-shadow: 0;
box-shadow: 0;
}
/************************************************* RESPONSIVE STUFFF**************************************************************/
/************************************************* RESPONSIVE STUFFF**************************************************************/
/************************************************* RESPONSIVE STUFFF**************************************************************/
/************************************************* RESPONSIVE STUFFF**************************************************************/
/************************************************* RESPONSIVE STUFFF**************************************************************/
/************************************************* RESPONSIVE STUFFF**************************************************************/
@media (min-width: 1200px){}
@media (min-width: 980px){}
@media (max-width: 979px){}
@media (max-width: 767px){}
@media (min-width: 768px) and (max-width: 979px)
{
.navbar-left .btn-navbar
{
margin-right: -15px;
}
.navbar-inner-left .container-fluid > .brand
{
float: left;
}
}
@media (max-width: 767px) and (min-width: 480px)
{
.nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a
{
padding-left: 30px;
}
.navbar-inner-left .container-fluid > .brand
{
padding-left: 30px;
}
.navbar-inner-left .nav-list > .nav-header
{
padding-left: 20px;
}
.navbar-left .btn-navbar
{
margin-right: 26px;
}
}
@media (max-width: 480px)
{
.nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a
{
padding-left: 30px;
}
.navbar-inner-left .container-fluid > .brand
{
padding-left: 30px;
}
.navbar-inner-left .nav-list > .nav-header
{
padding-left: 20px;
}
.navbar-left .btn-navbar
{
margin-right: 26px;
}
}
HTML Code Snippet
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<img alt="140x140" src="http://lorempixel.com/140/140/" />
<div class="navbar navbar-left">
<div class="navbar-inner navbar-inner-left">
<div class="container-fluid">
<a data-target=".navbar-responsive-collapse" data-toggle="collapse" class="btn btn-navbar">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar">
</span></a><a href="#" class="brand">Main Menu</a>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav nav-list">
<li class="nav-header">List header </li>
<li><a href="#">Home</a> </li>
<li><a href="#">Library</a> </li>
<li><a href="#">Applications</a> </li>
<li class="nav-header">Another list header </li>
<li><a href="#">Profile</a> </li>
<li><a href="#">Settings</a> </li>
<li class="divider"></li>
<li><a href="#">Help</a> </li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="span10">
<div class="navbar">
<div class="navbar-inner">
<div class="container-fluid">
<a data-target=".navbar-responsive-collapse" data-toggle="collapse" class="btn btn-navbar">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar">
</span></a><a href="#" class="brand">Title</a>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav">
<li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<strong
class="caret"></strong></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"></li>
<li class="nav-header">Nav header </li>
<li><a href="#">Separated link</a> </li>
<li><a href="#">One more separated link</a> </li>
</ul>
</li>
<li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<strong
class="caret"></strong></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"></li>
<li class="nav-header">Nav header </li>
<li><a href="#">Separated link</a> </li>
<li><a href="#">One more separated link</a> </li>
</ul>
</li>
<li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<strong
class="caret"></strong></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"></li>
<li class="nav-header">Nav header </li>
<li><a href="#">Separated link</a> </li>
<li><a href="#">One more separated link</a> </li>
</ul>
</li>
<li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<strong
class="caret"></strong></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"></li>
<li class="nav-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 pull-right">
<li><a href="#">Link</a> </li>
<li class="divider-vertical"></li>
<li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<strong
class="caret"></strong></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"></li>
<li><a href="#">Separated link</a> </li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="btn-group">
<button class="btn" type="button">
<em class="icon-align-left"></em>
</button>
<button class="btn" type="button">
<em class="icon-align-center"></em>
</button>
<button class="btn" type="button">
<em class="icon-align-right"></em>
</button>
<button class="btn" type="button">
<em class="icon-align-justify"></em>
</button>
</div>
</div>
</div>
</div>
Thanks in Advance!
解决方案
.navbar-left {
position: relative;
top: 88px;
}
.navbar-inner {
position: relative;
top: -44px;
}
And put that in the media query block you want to swap them in.
这篇关于如何使用Bootstrap移动导航栏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
