Bootstrap - 响应式Navbar无法正常工作
我最初有2 navbars，A和B，当您将浏览器缩小到A max-width: 767px之上的I needed A on top of B B集时，我的{{3}就是答案我选择css答案，但是当您点击按钮显示narvars，A的内容停留在同一个地方时，它会出现故障，但B 1}}移动到A以下，这不是欲望功能。
为了让事情更清楚......我将以图形方式显示：
点击按钮显示navbar的内容之前
点击按钮后显示navbar的内容
最初Main Menu位于Title之上，但下一个CSS类更改了此内容：
.navbar-left {
position: relative;
top: 88px;
}
.navbar-inner {
position: relative;
top: -44px;
}
以下是现场演示： previous question
我愿意接受任何解决方案，包括jquery对导航的css更改。
这是我的自定义CSS：
body{
border: solid;
}
.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 ***************/
/*****************************************************/
/*************** LEFT NAV CUSTOM STYLES **************/
/*****************************************************/
@media (min-width: 1200px) {
}
@media (min-width: 980px) {
}
@media (max-width: 979px) {
}
@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) {
/* BEGIN classes that make Title comes on top of Main Menu */
.navbar-left {
position: relative;
top: 88px;
}
.navbar-inner {
position: relative;
top: -44px;
}
/* END classes that make Title comes on top of Main Menu */
#logo-client {
display:none;
}
}
@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;
}
/*.span2 {
margin:0 auto;
top: 100px;
clear:none;
width:100%;
}
.span10 {
margin:0 auto;
top:0px;
clear:both;
width:100%;
}*/
}
HTML代码段
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<img id="logo-client" 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>
的更新
根据Morpheus的建议，现在两个navbar都表现独立，主要错误仍然存在，这是一个更新：
提前致谢！
1 个答案:
答案 0 :(得分：4)
您应该将data-target=".navbar-responsive-collapse"更改为定位唯一类，因为现在您一次定位两个具有相同类的div。
示例
<a data-target=".unique" data-toggle="collapse" class="btn btn-navbar">
<div class="nav-collapse collapse navbar-responsive-collapse unique">
注意唯一类。 jsfiddle
<强>更新
我删除了这些样式：
.navbar-left {
position: relative;
top: 88px;
}
.navbar-inner {
position: relative;
top: -44px;
}
它解决了这个问题。我不知道这是否适合你，因为菜单改变了堆叠位置。 updated jsfiddle
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？