本文介绍了如何编辑引导程序导航栏的样式?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试编辑自举导航栏的样式。但是,例如,我无法编辑颜色和删除边框。我想只是将颜色更改为白色,并将边框颜色更改为白色,以及下面的代码。任何人都可以告诉我我做错了什么?


$ 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>

这篇关于如何编辑引导程序导航栏的样式?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-15 04:54