Question

希望你能提供帮助 - 我把这个问题暂时搁置在这个问题上了。它开始时我试图重新着色默认的bootstrap导航栏......但后来我陷入了混乱并删除了所有的css以恢复默认....现在移动大小视口的导航栏切换图标已经消失（它仍然存在，但我似乎无法找到为什么它是不可见的（！）。我已经尝试用CSS来摆弄'颜色'它但是我没有运气......

提前致谢！

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!DOCTYPE HTML>
<html lang="en">
<head>
</head>
<body>
	<header>
		<nav class="navbar navbar-custom" role="navigation">
			<div class="container-fluid">   		 
				<div class="navbar-header">
				  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
					<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="#">Brand</a>
				</div>
				
				<!-- Collect the nav links, forms, and other content for toggling -->    
				<div id="navbar" class="navbar-collapse collapse">     
					<ul class="nav navbar-nav"> 
						<li><a href="index.php">Home</a></li>
						<li><a href="store.php">Store</a></li>
						<li><a href="events.php">Events</a></li>
						<li><a href="forum.php">Feedback</a></li> 
						<li><a href="contact.php">Contact</a></li>
					</ul>  
					<ul class="nav navbar-nav navbar-right">
						<li><a href="aboutus.php">About Us</a></li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span>User<span class="caret"></span></a>
							<ul class="dropdown-menu" role="menu">
								<li><a href="login.php"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
								<li><a href="logout.php"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
							</ul>
						</li>
					</ul>
				</div>   
			</div><!-- /.container-fluid -->
		</nav>                  
	</header>
</body>
</html>

Answer 1

.navbar-toggle的CSS为切换按钮的颜色设置了透明值。

.navbar-toggle {
  position: relative;
  float: right;
  padding: 9px 10px;
  margin-top: 8px;
  margin-right: 15px;
  margin-bottom: 8px;
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
 }

看看“背景颜色”和“边框”都是透明的吗？这意味着他们是看不见的。为这些选择器添加一些颜色，我想你会在路上。

像这样：

.navbar-toggle {
  position: relative;
  float: right;
  padding: 9px 10px;
  margin-top: 8px;
  margin-right: 15px;
  margin-bottom: 8px;
  background-color: black;
  background-image: none;
  border: 1px solid red;
  border-radius: 4px;
 }
  /* GIVE THE BARS SOME COLOR TOO */
 .icon-bar {
   background: white;
 }

希望这有帮助。

FIDDLE HERE

Answer 2

您可以像这样控制背景颜色

.navbar-header{
    background-color:red;
}

工作小提琴

http://jsfiddle.net/52VtD/8983/

'中间'和大视口上的胖引导标题？

2 个答案: