【发布时间】：2015-09-03 19:23:52
【问题描述】：
我是 Bootstrap 的新手，我使用自定义 CSS 将导航栏更改为我想要的样式。我遇到的问题是，当 Bootstrap 缩小为移动版本时，我的下拉列表 > 列表 > 链接不会保持大屏幕上显示的颜色。
我无法确定要指定更改下拉列表链接颜色的 css 类。我的目标是让文本始终保持白色，这在页面缩小到移动设备时除外。
body{
background: #168CCC;
}
/* navbar*/
.navbar-default {
background-color: #279DDD;
border: 0px;
}
/* title */
.navbar-default .navbar-brand {
color: #fefefe;
}
/* controls brand colour when hovered over or focused */
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus{
color: #fefefe;
}
/* navbar-deafult .navbar-nav link colour also when clicked */
.navbar-default .navbar-nav li a,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus {
color: #fefefe;
background-color: #279DDD;
}
/* navbar-deafult .navbar-nav background and text link colour when hovered */
.navbar-default .navbar-nav > .active > a:hover{
background: #0CA6F9;
color: #fefefe;
}
/* dropdown menu arrow aka caret */
.navbar-default .navbar-nav .dropdown a .caret {
border-top-color: #fefefe;
}
/* down arrow on dropdown when interacted with */
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
border-top-color: #fefefe;
border-bottom-color: #fefefe;
}
/* navbar-deafult .navbar-nav .dropdown link colour when hovered and focus */
.navbar-default .navbar-nav > .dropdown > a:hover,
.navbar-default .navbar-nav > .dropdown > a:focus{
background: #0CA6F9;
color: #fefefe;
}
/* dropdown arrow when active, hovered or focus */
.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
border-top-color: #fefefe;
border-bottom-color: #fefefe;
}
/* dropdown background */
.navbar-default .navbar-nav .open .dropdown-menu li a,
.navbar-default .navbar-nav .open .dropdown-menu{
background: #279DDD;
}
/* navbar-default .navbar-nav .open .dropdown-menu links background colour when hovered */
.navbar-default .navbar-nav .open .dropdown-menu li a:hover {
background: #168CCC;
}
/* mobile version nav menu icon border */
.navbar-default .navbar-toggle {
border-color: #fefefe;
}
/* mobile version nav menu icon background when interacted with */
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #279DDD;
}
/* mobile version nav menu icon colour */
.navbar-default .navbar-toggle .icon-bar {
background-color: #fefefe;
}<!DOCTYPE html>
<html lang="en">
<head>
<!--links css file-->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!--end-->
<!--Links bootstrap min javascript file-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--end-->
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">test site</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li class="active"><a href="#">Page 2</a></li>
<li class="active"><a href="#">Help</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>
</body>
</html>【问题讨论】：
标签： html css twitter-bootstrap