                        課程
                    
                        /前端開發
                        
                            /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

關注問題我要回答

1722

操作

收起

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