发现在屏幕宽度大于767px时，二级菜单还是default样式的；但是当屏幕小于767时，二级菜单就正常了。这个是要自己搞定的意思吗？还是代码哪里出错了呢？-慕课网

发现在屏幕宽度大于767px时，二级菜单还是default样式的；但是当屏幕小于767时，二级菜单就正常了。这个是要自己搞定的意思吗？还是代码哪里出错了呢？

来源：6-8 反色导航条

qq_忆真芙蓉_0

2016-06-26 15:40

<body>
<div class="navbar navbar-inverse" role="navigation">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".test1">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-header">
<a href="##" class="navbar-brand">慕课网</a>
</div>
<div class="collapse navbar-collapse test1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">网站首页</a></li>
<li><a href="#">系列教程</a></li>
<li><a href="#">名师介绍</a></li>
<li><a href="#">成功案例</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">关于我们<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">组织机构</a></li>
<li><a href="#">教学理念</a></li>
<li><a href="#">办公主旨</a></li>
<li><a href="#">未来目标</a></li>
</ul>
</li>
</ul>
</div>
</div>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>

写回答关注

4回答

DQJ俊逸: 2016-07-06 22:52:13

已采纳

是这样的在bootstrap的css底层代码中只有当767px以内的才改变二级导航的背景颜色

.navbar-inverse {
  background-color: #222;
  border-color: #080808;
}
.navbar-inverse .navbar-brand {
  color: #9d9d9d;
}
.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
  color: #fff;
  background-color: transparent;
}
.navbar-inverse .navbar-text {
  color: #9d9d9d;
}
.navbar-inverse .navbar-nav > li > a {
  color: #9d9d9d;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
  color: #fff;
  background-color: transparent;
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  color: #fff;
  background-color: #080808;
}
.navbar-inverse .navbar-nav > .disabled > a,
.navbar-inverse .navbar-nav > .disabled > a:hover,
.navbar-inverse .navbar-nav > .disabled > a:focus {
  color: #444;
  background-color: transparent;
}
.navbar-inverse .navbar-toggle {
  border-color: #333;
}
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
  background-color: #333;
}
.navbar-inverse .navbar-toggle .icon-bar {
  background-color: #fff;
}
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
  border-color: #101010;
}
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
  color: #fff;
  background-color: #080808;
}
@media (max-width: 767px) {
  .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
    border-color: #080808;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu .divider {
    background-color: #080808;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
    color: #9d9d9d;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #fff;
    background-color: transparent;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #fff;
    background-color: #080808;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: #444;
    background-color: transparent;
  }
}
.navbar-inverse .navbar-link {
  color: #9d9d9d;
}
.navbar-inverse .navbar-link:hover {
  color: #fff;
}
.navbar-inverse .btn-link {
  color: #9d9d9d;
}
.navbar-inverse .btn-link:hover,
.navbar-inverse .btn-link:focus {
  color: #fff;
}
.navbar-inverse .btn-link[disabled]:hover,
fieldset[disabled] .navbar-inverse .btn-link:hover,
.navbar-inverse .btn-link[disabled]:focus,
fieldset[disabled] .navbar-inverse .btn-link:focus {
  color: #444;
}

1 0

qq_忆真芙...

非常感谢！

2016-07-07 09:23:21

共 1 条回复 >

慕娘8950785

2016-12-11 23:38:29

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".test1">
data-target=".test1"你有没有试过删掉那个点？

0 0
Freya0_0

2016-06-27 12:36:15

加这个<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

1 0

qq_忆真芙...

我是把最新的bootstrap下载到本地运行的，加了也没用呀！不是这个问题吧

2016-06-27 14:54:54

共 1 条回复 >
Freya0_0

2016-06-27 09:27:14

头部

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础表单</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>

0 0

玩转Bootstrap（基础）

告诉你使用Bootstrap，并且能够独立定制出适合自己的Bootstrap

314544 学习 · 2275 问题

查看课程

相似问题

在下拉菜单中，如何实现当点击二级菜单时，一级菜单里文字变成二级菜单里的文字

回答 2

导航菜单默认在屏幕小于768px的时候自动折叠，怎么自定义这个大小？

回答 5

二级菜单加list-inline，全屏没效果

回答 1

二级菜单出不来

回答 4

二级菜单出不来？？？？？

回答 2

打开慕课网App查看更多内容