如何从自举导航栏中删除此白线并更改文本颜色？ [英] How do I remove this white line from my bootstrap navbar and change the text colors?
问题描述
我一直在玩引导程序，所以建立一个小的个人页面，我有一个导航栏，看起来像这样： ><身体GT;
< nav class =navbar navbar-default navbar-fixed-top navbar-shrink>
< div class =container>
< div class =navbar-header page-scroll>
< button type =buttonclass =navbar-toggledata-toggle =collapsedata-target =。navbar-collapse>
< span class =sr-only>切换导航< / span>
< span class =icon-bar>< / span>
< span class =icon-bar>< / span>
< span class =icon-bar>< / span>
< / button>
< a class =navbar-brandhref =＃home> Jon Snow< / a>
< / div>
< div class =collapse navbar-collapseid =bs-example-navbar-collapse-1>
< ul class =nav navbar-nav navbar-right>
< li class =page-scroll>
< a href =＃about>关于我< / a>
< / li>
< li class =page-scroll>
< a href =＃work>工作< / a>
< / li>
< li class =page-scroll>
< a href =＃blog>博客< / a>
< / li>
< li class =page-scroll>
< a href =＃contact>与我联系< / 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）;
}
但是我在导航栏中看到如下所示的白线：
如何去掉白线并将导航栏中的项目颜色更改为白色？ / p>
以下是 JS小提琴。
以下是可以应用于移除边框（在所有视口上）并更改 li items。
请参阅工作示例代码片段。
body，html {background：＃2c3e50;}。navbar.navbar-default {padding：10px 0;背景：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 =buttonclass =navbar-toggledata-toggle =collapsedata-target =。navbar-collapse> < span class =sr-only>切换导航< / span> < span class =icon-bar>< / span> < span class =icon-bar>< / span> < span class =icon-bar>< / span> < /按钮> < a class =navbar-brandhref =＃home> Jon Snow< / a> < / DIV> < div class =collapse navbar-collapseid =bs-example-navbar-collapse-1> < ul class =nav navbar-nav navbar-right> < li class =page-scroll> < a href =＃about>关于我< / a> < /锂> < li class =page-scroll> < a href =＃work>工作< / a> < /锂> < li class =page-scroll> < a href =＃blog>博客< / a> < /锂> < li class =page-scroll> < a href =＃contact>与我联系< / a> < / UL> < / DIV> < / div>
I have been playing around with bootstrap so build me a small personal page where I have a navbar that looks like this:
<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>
And its styled as follows:
body {
background-color:#2c3e50;
}
.navbar-fixed-top.navbar-shrink {
color:white;
padding: 10px 0;
background: rgba(0, 0, 0, .1);
}
But I get a white line at the navbar that looks like this:
How do I remove the white line and change the colors of the items in the Navbar to white?
Here is a JS Fiddle.
Here are the rules you can apply to remove borders (on all viewports) and change the color of the li items.
See working example Snippet.
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>
这篇关于如何从自举导航栏中删除此白线并更改文本颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
