                        课程
                    
                        /前端开发
                        
                            /Bootstrap
                        
                        /玩转Bootstrap（基础）

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

<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>

qq_忆真芙蓉_0

2016-06-26

源自：玩转Bootstrap（基础） 6-8

关注问题我要回答

1657

操作

收起

4 回答

DQJ俊逸回答被采纳 +3 积分
2016-07-06

是这样的在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;
}

0 回复有任何疑惑可以回复我~

收起回答

qq_忆真芙蓉_0 提问者

非常感谢！

2016-07-07 回复有任何疑惑可以回复我~

慕娘8950785
2016-12-11

data-target=".test1"你有没有试过删掉那个点？

0 回复有任何疑惑可以回复我~

收起回答

Freya0_0
2016-06-27

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

0 回复有任何疑惑可以回复我~

收起回答

qq_忆真芙蓉_0 提问者

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

2016-06-27 回复有任何疑惑可以回复我~

Freya0_0
2016-06-27

头部

<!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>