问题描述
我正在尝试编辑自举导航栏的样式。但是,例如,我无法编辑颜色和删除边框。我想只是将颜色更改为白色,并将边框颜色更改为白色,以及下面的代码。任何人都可以告诉我我做错了什么?
$ b
.navbar-default { background-color:#ffffff; navbar-default:#navif-default:navbar-brand {color:#292929;}。navbar-default .navbar-brand:hover,.navbar-default .navbar-brand:focus {color:#ffd4d4; } .navbar-default .navbar-text {color:#292929;}。navbar-default .navbar-nav> li> a {color:#292929;}。navbar-default .navbar-nav> li> a:hover,.navbar-default .navbar-nav> li> a:focus {color:#ffd4d4;}。navbar-default .navbar-nav> .active> a,.navbar-default .navbar-nav> .active> a:hover,.navbar-default .navbar-nav> .active> a:focus {color:#ffd4d4; background-color:#ffffff;}。navbar-default .navbar-nav> .open> a,.navbar-default .navbar-nav> .open> a:hover,.navbar-default .navbar-nav> .open> a:focus {color:#ffd4d4; navbar-default:navbar-toggle {border-color:#ffffff;}。navbar-default .navbar-toggle:hover,.navbar-default .navbar-toggle:focus {background-color:background-color:#ffffff;}。 :#ffffff;}。navbar-default .navbar-toggle.icon-bar {background-color:#292929;}。navbar-default .navbar-collapse,.navbar-default .navbar-form {border-color:#292929 ; navbar-default .navbar-link {color:#292929;}。navbar-default .navbar-link:hover {color:#ffd4d4;}。navbar-brand {transform:translateX(-50%);}。剩下:50%; position:absolute;}。navbar-nav> li.navbar-left {font-family:'Nunito Sans',sans-serif; navbar-brand {padding:0px;}。navbar-brand> img {height:90%; font-size:11px;}。 width:auto;}。banner {width:100%; / * background-color:#c3d7df; * /}。banner-inner {max-width:1100px; margin:0 auto;}
<!DOCTYPE html> < html lang =en>< head> < meta charset =utf-8/> < meta name =viewportcontent =width = device = width,initial-scale = 1.0> <标题>我的网站< / title> < link rel =stylesheethref =https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css> < link rel =stylesheettype =text / csshref =style.css/> < link href =https://fonts.googleapis.com/css?family=Nunito|Nunito+Sans|Playfair+Display =stylesheet> <! - 最新编译和缩小的CSS - > < link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.cssintegrity =sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va + PmSTsz / K68vbdEjh4ucrossorigin =anonymous > <! - 最新编译和缩小的JavaScript - > < script src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.jsintegrity =sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txacrossorigin =anonymous>< / script> < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script> < /头><身体GT; <报头GT; < div class =container> < nav class =navbar navbar-default> < div class =container-fluid> < div class =navbar-header> < button type =buttonclass =navbar-toggle collapseddata-toggle =collapsedata-target =#navbar> < span class =sr-only>切换导航< / span> < span class =icon-bar>< / span> < span class =icon-bar>< / span> < span class =icon-bar>< / span> < /按钮> < a class =navbar-brandhref =http://jh.com>< img class =logosrc =img / logo.png>< / a> < / DIV> < div id =navbarclass =navbar-collapse collapse> < ul class =nav navbar-nav> < li class =navbar-left>< a href =index.html> TRAVEL< / a>< / li> < li class =navbar-left>< a href =#>激励与LT; / A>< /锂> < li class =navbar-left>< a href =#> PORTFOLIO< / a>< / li> < li class =navbar-left>< a href =#>关于< / a>< / li> < / UL> < ul class =nav navbar-nav navbar-right> <李> < a href =https://www.instagram.com>< i class =fa fa-instagram>< / i>< / a> <李> < a href =https://www.pinterest.com>< i class =fa fa-pinterest>< / i>< / a> <李> < a href =https://www.facebook.com>< i class =fa fa-facebook>< / i>< / a> <李> < a href =https://twitter.com>< i class =fa fa-twitter>< / i>< / a> < / UL> < / DIV> <! - /。nav-collapse - > < / DIV> <! - /。container-fluid - > < / NAV>< / DIV> < / header><!--- End Header - > < section class =banner> < div class =banner-inner> < img class =bannersrc =img / background.png> < / DIV> <!--- End Banner - >< / body>< / html>
这是因为您的css被默认的引导程序css覆盖。
您只需进行一项更改。使用 .navbar.navbar-default
而不是 .navbar-default
无处不在,这会让您的css偏好超过默认CSS。
下面是关于css特性的一篇很好的文章:
.navbar.navbar-default {background-color:#ffffff; navbar.navbar-default .navbar-brand {color:#292929;}。navbar.navbar-default .navbar-brand:hover,.navbar.navbar-default .navbar-brand:focus -navbar-brand:border-color:#ffffff;}。 {color:#ffd4d4;}。navbar.navbar-default .navbar-text {color:#292929;}。navbar.navbar-default .navbar-nav> li> {color:#292929;}。navbar.navbar-default .navbar-nav> li> a:悬停,.navbar.navbar-default .navbar-nav> li> a:focus {color:#ffd4d4;}。navbar.navbar-default .navbar-nav> .active> a,.navbar.navbar-default .navbar-nav> .active> a:悬停,.navbar.navbar-default .navbar-nav> .active> a:focus {color:#ffd4d4; background-color:#ffffff;}。navbar.navbar-default .navbar-nav> .open> a,.navbar.navbar-default .navbar-nav> .open> a:悬停,.navbar.navbar-default .navbar-nav> .open> a:focus {color:#ffd4d4; navbar.navbar-default .navbar-toggle {border-color:#ffffff;}。navbar.navbar-default .navbar-toggle:悬停,.navbar.navbar-default .navbar-toggle :focus {background-color:#ffffff;}。navbar.navbar-default .navbar-toggle .icon-bar {background-color:#292929;}。navbar.navbar-default .navbar-collapse,.navbar.navbar- navbar.navbar-default .navbar-link {color:#292929;}。navbar.navbar-default .navbar-link:hover {color:#ffd4d4;}。navbar-品牌{transform:translateX(-50%);剩下:50%; position:absolute;}。nav.navbar-nav> li.navbar-left {font-family:'Nunito Sans',sans-serif; navbar-brand {padding:0px;}。navbar-brand> img {height:90%; font-size:11px;}。 width:auto;}。banner {width:100%; / * background-color:#c3d7df; * /}。banner-inner {max-width:1100px; margin:0 auto;} @ media(min-width:768px)和(max-width:991px){.container.navbar-container {width:100%;填充:0; }}
< script src =https:// ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script><!DOCTYPE html>< html lang =en>< head> < meta charset =utf-8/> < meta name =viewportcontent =width = device = width,initial-scale = 1.0> <标题>我的网站< / title> < link rel =stylesheethref =https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css> < link rel =stylesheettype =text / csshref =style.css/> < link href =https://fonts.googleapis.com/css?family=Nunito|Nunito+Sans|Playfair+Display =stylesheet> <! - 最新编译和缩小的CSS - > < link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.cssintegrity =sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va + PmSTsz / K68vbdEjh4ucrossorigin =anonymous > <! - 最新编译和缩小的JavaScript - > < script src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.jsintegrity =sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txacrossorigin =anonymous>< / script> < /头><身体GT; <报头GT; < div class =container navbar-container> < nav class =navbar navbar-default> < div class =container-fluid> < div class =navbar-header> < button type =buttonclass =navbar-toggle collapseddata-toggle =collapsedata-target =#navbar> < span class =sr-only>切换导航< / span> < span class =icon-bar>< / span> < span class =icon-bar>< / span> < span class =icon-bar>< / span> < /按钮> < a class =navbar-brandhref =http://jh.com>< img class =logosrc =http://images.financialexpress.com/2015/12/Lead- image.jpg的>< / A> < / DIV> < div id =navbarclass =navbar-collapse collapse> < ul class =nav navbar-nav> < li class =navbar-left>< a href =index.html> TRAVEL< / a>< / li> < li class =navbar-left>< a href =#>激励与LT; / A>< /锂> < li class =navbar-left>< a href =#> PORTFOLIO< / a>< / li> < li class =navbar-left>< a href =#>关于< / a>< / li> < / UL> < ul class =nav navbar-nav navbar-right> <李> < a href =https://www.instagram.com>< i class =fa fa-instagram>< / i>< / a> <李> < a href =https://www.pinterest.com>< i class =fa fa-pinterest>< / i>< / a> <李> < a href =https://www.facebook.com>< i class =fa fa-facebook>< / i>< / a> <李> < a href =https://twitter.com>< i class =fa fa-twitter>< / i>< / a> < / UL> < / DIV> <! - /。nav-collapse - > < / DIV> <! - /。container-fluid - > < / NAV>< / DIV> < / header><!--- End Header - > < section class =banner> < div class =banner-inner> < img class =bannersrc =img / background.png> < / DIV> <!--- End Banner - >< / body>< / html>
I am trying to edit the style of my bootstrap navigation bar. However, I am unable to edit color and remove borders, for example. I would like to just change the color to white and the border color to white as well I have included the code below. Can anyone tell me what I am doing wrong?
.navbar-default {
background-color: #ffffff;
border-color: #ffffff;
}
.navbar-default .navbar-brand {
color: #292929;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #ffd4d4;
}
.navbar-default .navbar-text {
color: #292929;
}
.navbar-default .navbar-nav > li > a {
color: #292929;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #ffd4d4;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #ffd4d4;
background-color: #ffffff;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #ffd4d4;
background-color: #ffffff;
}
.navbar-default .navbar-toggle {
border-color: #ffffff;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #ffffff;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #292929;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #292929;
}
.navbar-default .navbar-link {
color: #292929;
}
.navbar-default .navbar-link:hover {
color: #ffd4d4;
}
.navbar-brand {
transform: translateX(-50%);
left: 50%;
position: absolute;
}
.navbar-nav > li.navbar-left {
font-family: 'Nunito Sans', sans-serif;
font-size: 11px;
}
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: 90%;
width: auto;
}
.banner {
width: 100%;
/*background-color: #c3d7df;*/
}
.banner-inner {
max-width: 1100px;
margin: 0 auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device=width, initial-scale=1.0">
<title> My Website</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Nunito|Nunito+Sans|Playfair+Display" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<header>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#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="http://jh.com"><img class= "logo" src="img/logo.png"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="navbar-left"><a href="index.html">TRAVEL</a></li>
<li class="navbar-left"><a href="#"> INSPIRATION</a></li>
<li class="navbar-left"><a href="#"> PORTFOLIO </a></li>
<li class="navbar-left"><a href="#"> ABOUT </a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> <a href="https://www.instagram.com"><i class="fa fa-instagram"></i></a>
<li> <a href="https://www.pinterest.com"><i class="fa fa-pinterest"></i></a>
<li> <a href="https://www.facebook.com"><i class="fa fa-facebook"></i></a>
<li> <a href="https://twitter.com"><i class="fa fa-twitter"></i></a>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
</header>
<!---End Header-->
<section class="banner">
<div class="banner-inner">
<img class="banner" src="img/background.png">
</div>
</section>
<!---End Banner-->
</body>
</html>
This is happening because your css is being overwritten by the default bootstrap css.
You need to make only one change. Use .navbar.navbar-default
instead of just .navbar-default
everywhere, this will give your css preference over the default css.
Here's a good article on css specificity : https://css-tricks.com/specifics-on-css-specificity/
.navbar.navbar-default {
background-color: #ffffff;
border-color: #ffffff;
}
.navbar.navbar-default .navbar-brand {
color: #292929;
}
.navbar.navbar-default .navbar-brand:hover,
.navbar.navbar-default .navbar-brand:focus {
color: #ffd4d4;
}
.navbar.navbar-default .navbar-text {
color: #292929;
}
.navbar.navbar-default .navbar-nav > li > a {
color: #292929;
}
.navbar.navbar-default .navbar-nav > li > a:hover,
.navbar.navbar-default .navbar-nav > li > a:focus {
color: #ffd4d4;
}
.navbar.navbar-default .navbar-nav > .active > a,
.navbar.navbar-default .navbar-nav > .active > a:hover,
.navbar.navbar-default .navbar-nav > .active > a:focus {
color: #ffd4d4;
background-color: #ffffff;
}
.navbar.navbar-default .navbar-nav > .open > a,
.navbar.navbar-default .navbar-nav > .open > a:hover,
.navbar.navbar-default .navbar-nav > .open > a:focus {
color: #ffd4d4;
background-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle {
border-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle:hover,
.navbar.navbar-default .navbar-toggle:focus {
background-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle .icon-bar {
background-color: #292929;
}
.navbar.navbar-default .navbar-collapse,
.navbar.navbar-default .navbar-form {
border:none;
}
.navbar.navbar-default .navbar-link {
color: #292929;
}
.navbar.navbar-default .navbar-link:hover {
color: #ffd4d4;
}
.navbar-brand {
transform: translateX(-50%);
left: 50%;
position: absolute;
}
.nav.navbar-nav > li.navbar-left {
font-family: 'Nunito Sans', sans-serif;
font-size: 11px;
}
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: 90%;
width: auto;
}
.banner {
width: 100%;
/*background-color: #c3d7df;*/
}
.banner-inner {
max-width: 1100px;
margin: 0 auto;
}
@media (min-width:768px) and (max-width:991px){
.container.navbar-container {
width:100%;
padding:0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device=width, initial-scale=1.0">
<title> My Website</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Nunito|Nunito+Sans|Playfair+Display" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<header>
<div class="container navbar-container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#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="http://jh.com"><img class= "logo" src="http://images.financialexpress.com/2015/12/Lead-image.jpg"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="navbar-left"><a href="index.html">TRAVEL</a></li>
<li class="navbar-left"><a href="#"> INSPIRATION</a></li>
<li class="navbar-left"><a href="#"> PORTFOLIO </a></li>
<li class="navbar-left"><a href="#"> ABOUT </a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> <a href="https://www.instagram.com"><i class="fa fa-instagram"></i></a>
<li> <a href="https://www.pinterest.com"><i class="fa fa-pinterest"></i></a>
<li> <a href="https://www.facebook.com"><i class="fa fa-facebook"></i></a>
<li> <a href="https://twitter.com"><i class="fa fa-twitter"></i></a>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
</header>
<!---End Header-->
<section class="banner">
<div class="banner-inner">
<img class="banner" src="img/background.png">
</div>
</section>
<!---End Banner-->
</body>
</html>
这篇关于如何编辑引导程序导航栏的样式?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!