用bootstrap遇到的问题

在用bootstrap实现一个响应式页面时，我在导航栏遇到了一个很简单的问题，记录一下，避免以后在犯相同的错误：

我本来想实现的效果是：

浏览器正常的时候：

 浏览器缩小了以后：

点击右侧下拉之后：

结果却成了：

找了很久，一直以为是bootstrap-resposive.css这个文件没有引进去，最后才发现这个文件已经引入，而且下面的内容都显示正常，主要是bootstrap-resposive.css文件里控制这个下拉按钮的代码出了问题，他原本的代码是：.navbar.btn-navbar {   display: block; }，而我的这个button外面并没有一个.navbar的标签，因此我加上了

 .navbar.btn-navbar {     display: block; } .nav>.navbar-inner>.container>.btn{ display: block;margin-top: 7px; }这样就好了。