如何编辑引导程序导航栏的样式？ [英] How do I edit the style of bootstrap navigation bar?
本文介绍了如何编辑引导程序导航栏的样式？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试编辑自举导航栏的样式。但是，例如，我无法编辑颜色和删除边框。我想只是将颜色更改为白色，并将边框颜色更改为白色，以及下面的代码。任何人都可以告诉我我做错了什么？
$ 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特性的一篇很好的文章： https://css-tricks.com/specifics-on-css-specificity/
.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>
这篇关于如何编辑引导程序导航栏的样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
