Question

我试图在bootstrap中更改一些颜色的文本，我是新的。

我需要将菜单中的文字颜色更改为白色。在鼠标悬停时，它应该更改为黑色文本和白色背景。

＆＃13;

.mega-dropdown {
  position: static !important;
}
.mega-dropdown-menu {
    padding: 20px 0px;
    width: 100%;
    box-shadow: none;
    -webkit-box-shadow: none;
}
.mega-dropdown-menu > li > ul {
  padding: 0;
  margin: 0;
}
.mega-dropdown-menu > li > ul > li {
  list-style: none;
}
.mega-dropdown-menu > li > ul > li > a {
  display: block;
  color: #222;
  padding: 2px 1px;
}
.mega-dropdown-menu > li ul > li > a:hover,
.mega-dropdown-menu > li ul > li > a:focus {
}
.mega-dropdown-menu .dropdown-header {
  font-size: 18px;
  color: #ff3546;
  padding: 5px 0px 5px 5px;
  text-align: left;
  line-height: 30px;
}
.carousel-control {
  width: 30px;
  height: 30px;
  top: -35px;

}
.left.carousel-control {
  right: 30px;
  left: inherit;
}
.carousel-control .glyphicon-chevron-left, 
.carousel-control .glyphicon-chevron-right {
  font-size: 12px;
  background-color: #fff;
  line-height: 30px;
  text-shadow: none;
  color: #333;
  border: 1px solid #ddd;
}

.navbar-brand img {
  width: 70px;
  height: 50px;
  margin-top: -15px;
}

#navbar-inverse {
 background: #c42027; 
 border: 0px;
}

#dropdown_toggle  {
  font-color: #ffffff;
}

＆＃13;

<div class="container">
  <nav class="navbar navbar-inverse" id="navbar-inverse">
<div class="navbar-header">
	<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse">
		<span class="sr-only">Toggle navigation</span>
		<span class="icon-bar"></span>
		<span class="icon-bar"></span>
		<span class="icon-bar"></span>
	</button>
	<a class="navbar-brand" href="#"><img src="images/logo/conlins logo.jpg"></a>
</div>

<div class="collapse navbar-collapse js-navbar-collapse" id="collapse-navbar-collapse" >
	<ul class="nav navbar-nav">
		<li class="dropdown mega-dropdown">
			<a href="#" class="dropdown-toggle" id="dropdown_toggle" data-toggle="dropdown">Product <span class="caret"></span></a>				
			<ul class="dropdown-menu mega-dropdown-menu">
				<li class="col-sm-3">
					<ul>
						<li class="dropdown-header">Features</li>
						<li><a href="#">Auto Carousel</a></li>
                        <li><a href="#">Carousel Control</a></li>
                        <li><a href="#">Left & Right Navigation</a></li>
						<li><a href="#">Four Columns Grid</a></li>
						<li class="divider"></li>
						<li class="dropdown-header">Fonts</li>
                        <li><a href="#">Glyphicon</a></li>
						<li><a href="#">Google Fonts</a></li>
					</ul>
				</li>
				<li class="col-sm-3">
					<ul>
						<li class="dropdown-header">Plus</li>
						<li><a href="#">Navbar Inverse</a></li>
						<li><a href="#">Pull Right Elements</a></li>
						<li><a href="#">Coloured Headers</a></li>                            
						<li><a href="#">Primary Buttons & Default</a></li>							
					</ul>
				</li>
				<li class="col-sm-3">
					<ul>
						<li class="dropdown-header">Much more</li>
                        <li><a href="#">Easy to Customize</a></li>
						<li><a href="#">Calls to action</a></li>
						<li><a href="#">Custom Fonts</a></li>
						<li><a href="#">Slide down on Hover</a></li>                         
					</ul>
				</li>
			</ul>				
		</li>
        <li class="dropdown mega-dropdown">
			<a href="#" class="dropdown-toggle" data-toggle="dropdown">Events <span class="caret"></span></a>				
			<ul class="dropdown-menu mega-dropdown-menu">
				<li class="col-sm-3">
					<ul>
						<li class="dropdown-header">Features</li>
						<li><a href="#">Auto Carousel</a></li>
                        <li><a href="#">Carousel Control</a></li>
                        <li><a href="#">Left & Right Navigation</a></li>
						<li><a href="#">Four Columns Grid</a></li>
						<li class="divider"></li>
						<li class="dropdown-header">Fonts</li>
                        <li><a href="#">Glyphicon</a></li>
						<li><a href="#">Google Fonts</a></li>
					</ul>
				</li>
				<li class="col-sm-3">
					<ul>
						<li class="dropdown-header">Plus</li>
						<li><a href="#">Navbar Inverse</a></li>
						<li><a href="#">Pull Right Elements</a></li>
						<li><a href="#">Coloured Headers</a></li>                            
						<li><a href="#">Primary Buttons & Default</a></li>							
					</ul>
				</li>
				<li class="col-sm-3">
					<ul>
						<li class="dropdown-header">Much more</li>
                        <li><a href="#">Easy to Customize</a></li>
						<li><a href="#">Calls to action</a></li>
						<li><a href="#">Custom Fonts</a></li>
						<li><a href="#">Slide down on Hover</a></li>                         
					</ul>
				</li>
			</ul>				
		</li>
        <li><a href="#">Store</a></li>
	</ul>
</div><!-- /.nav-collapse -->
  </nav>
</div>

＆＃13;

Answer 1

你只需要覆盖锚元素的bootstrap颜色样式并设置！重要如下，

.mega-dropdown-menu > li > ul > li > a {
  color: #222 !important;
}

Answer 2

您可以根据需要保留或删除边框

将此添加到您的css：

 .navbar-collapse{
  background-color:#ed1c24;
}
.navbar-inverse .navbar-nav>li>a{
  color:white;
  background-color:#ed1c24;
  margin:0;
  padding:0 15px;
  line-height:50px;
  display:block;
}
.navbar-inverse .navbar-nav>li>a:hover{
  color:black;
  background-color:white;
}
.navbar-inverse .navbar-nav>.open>a:hover{
  color:black;
  background-color:white;
}

更改菜单导航栏的字体颜色

2 个答案: