如何从引导导航栏中删除此白线并更改文本颜色？
dik*_*ant 0 html css twitter-bootstrap
我一直在玩bootstrap,所以建立一个小的个人页面,我有一个看起来像这样的导航栏:
<body>
<nav class="navbar navbar-default navbar-fixed-top navbar-shrink">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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="#home">Jon Snow</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="page-scroll">
<a href="#about">About Me</a>
</li>
<li class="page-scroll">
<a href="#work">Work</a>
</li>
<li class="page-scroll">
<a href="#blog">Blog</a>
</li>
<li class="page-scroll">
<a href="#contact">Contact Me</a>
</ul>
</div>
</div>
</nav>
</body>
其风格如下:
body {
background-color:#2c3e50;
}
.navbar-fixed-top.navbar-shrink {
color:white;
padding: 10px 0;
background: rgba(0, 0, 0, .1);
}
但是我在导航栏上看到如下所示的白线:
如何删除白线并将导航栏中的项目颜色更改为白色？
这是一个JS小提琴.
以下是您可以应用于删除边框(在所有视口上)并更改li项目颜色的规则.
请参阅工作示例代码段.
body,
html {
background: #2c3e50;
}
.navbar.navbar-default {
padding: 10px 0;
background: rgba(0, 0, 0, .1);
border: none;
}
.navbar.navbar-default .navbar-nav > li > a,
.navbar.navbar-default .navbar-brand {
color: white;
}
.navbar.navbar-default .navbar-collapse {
border: none;
box-shadow: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top navbar-shrink">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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="#home">Jon Snow</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="page-scroll">
<a href="#about">About Me</a>
</li>
<li class="page-scroll">
<a href="#work">Work</a>
</li>
<li class="page-scroll">
<a href="#blog">Blog</a>
</li>
<li class="page-scroll">
<a href="#contact">Contact Me</a>
</ul>
</div>
</div>