gpt4 book ai didi

html - 如何从 Bootstrap 导航栏中删除这条白线并更改文本颜色?

转载 作者:太空宇宙 更新时间:2023-11-03 19:49:59 25 4
gpt4 key购买 nike

我一直在玩 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);
}

但是我在导航栏上看到一条白线,看起来像这样: enter image description here

如何移除白线并将导航栏中元素的颜色更改为白色?

这是一个JS Fiddle .

最佳答案

您可以应用以下规则来移除边框(在所有视口(viewport)上)并更改 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>

关于html - 如何从 Bootstrap 导航栏中删除这条白线并更改文本颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34573447/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com