如何编辑引导程序导航栏的样式?

2024-02-07

我正在尝试编辑引导导航栏的样式。但是,例如,我无法编辑颜色和删除边框。我想将颜色更改为白色,并将边框颜色更改为白色,并且我已包含以下代码。谁能告诉我我做错了什么?

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

发生这种情况是因为您的 css 被默认引导 css 覆盖。

您只需要进行一项更改。使用.navbar.navbar-default而不仅仅是.navbar-default在任何地方,这都会让你的 css 优先于默认的 css。

这是一篇关于 css 特异性的好文章:https://css-tricks.com/specials-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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何编辑引导程序导航栏的样式? 的相关文章

随机推荐

  • WCF - NetMsmqBinding 与 NetTcpBinding

    我正在浏览这篇文章http weblogs asp net spano archive 2007 10 02 choosing the right wcf binding aspx http weblogs asp net spano ar
  • Jinja 有一个“居中”格式选项,但是“右对齐”怎么样?

    说我有 for key value in adict key value endfor 如何确保所有键都已填充 以便输出为 something 1 someotherthing 3 thelastthing 2 编辑 这是not我正在处理的
  • 将 XML 相同标签序列化两次

    我有问题 我必须将类序列化为 XML 文件 但两个属性必须使用相同的名称 所需的 XML
  • 如何配置 Apache 使用 Access-Control-Allow-Origin 标头处理多个域?

    我想将 Apache 配置为允许来自多个域 但不是所有域 的 XMLHttpRequest 这有效 Header set Access Control Allow Origin 但这是不安全的 我想允许我指定的域 所以经过一番谷歌搜索后我得
  • AEM CQ 与 JPA(休眠)

    我正在使用 Adob e Experience Manager AEM 6 4 Service Pack 1 和 Forms Package 我有很多扩展的属性 属性 所以我制作了一个数据库图 我不想将所有其他内容保存在 crx 中 我想将
  • 关于 javax.persistence JAR 的 Maven 依赖项?

    我正在使用 Spring 3 和 Hibernate 4 JPA 我很困惑javax 持久性罐 我在 Google 上发现了以下两个 Maven 依赖项 请告诉我以下两个依赖项中需要哪一个
  • setSelectionIndicatorImage 尺寸错误

    再会 我在标签栏中放置了一张图片 但它的尺寸错误 帮我解决这个问题 我想填充整个项目 void setupTabBarAppearance UITabBar appearance setBarTintColor UIColor colorW
  • Flutter:将应用程序作为后台服务运行

    我想在用户断开蜂窝呼叫时显示自定义弹出消息 问题是如何检测应用程序何时未运行 任何线索都会有帮助 已经有一段时间了 有很多进展 首先 有一些答案如何在 Flutter 中创建服务以使应用程序始终在后台运行 https stackoverfl
  • postgresql 中明显的事务隔离违规

    我在 CentOS Linux 上使用 PostgreSQL 9 3 12 我有两个进程连接到同一个数据库 使用默认事务隔离级别 读已提交 根据 postgres 文档 事务中的一个进程在提交之前不应 看到 事务中另一进程所做的更改 我看到
  • 方法、常量、变量和字段的奇异名称 - 错误还是功能?

    在评论中出现一些混乱之后 PHP 中使用 1 个字母的类名是否安全 例如 A B C https stackoverflow com questions 3416551 is it safe to have 1 letter class n
  • 如何通过 PowerShell 获取在线文件的文件大小?

    我正在尝试编写一个执行以下操作的 PowerShell 脚本 检查PC上是否存在特定文件 如果存在 则将本地文件大小与在线文件大小进行比较 如果在线文件大小大于本地文件大小 请下载该文件 检查是否有更新版本 如果不存在 请从网站下载该文件
  • SSIS - 动态地将文件移动到具有匹配子字符串名称的文件夹

    我正在使用 foreach 循环和文件系统任务将文件移动到特定文件夹中 或至少尝试这样做 i e 文件名可以是100000 需要到文件夹1000 文件102000需要转到文件夹1020 文件103000需要转到文件夹1030 ETC ETC
  • 如果我使用 Glad 而不是 GLEW,我会错过什么吗?

    我想使用 OpenGL 但我不知道如何设置 GLEW 如果我要使用 Glad 我会失去一些东西吗 我可以从使用 GLEW 的教程中学习吗 如果您开始在桌面平台上使用 OpenGL 进行编程 那么任何一种都可以工作 并且选择并不那么重要 稍后
  • Python shift() 从同一列,就像 Excel 中的日期一样

    我想在 python 中创建 target start 列 id start end diff target start 12220 1999 11 22 2008 08 31 3515 1999 11 22 12220 2018 04 1
  • c# - 如何以编程方式检查解决方案中的引用是否配置正确

    我们遇到了一些构建错误 需要手动修复引用 我想以编程方式检查是否定义了项目引用而不是 dll 引用 因此 请检查解决方案中的所有引用 并针对每个项目检查引用的定义是否正确 这样相关的依赖就会被正确配置 有人知道现有的解决方案吗 我想要一个在
  • 如何将WPF动画逐帧渲染为视频?

    我在 WPF 中创建了一个我喜欢的很好的效果 我希望能够 记录 这个效果 但运行时却很不稳定 有没有办法可以将其转换为逐帧过程并自己将其另存为视频 而不是尝试在播放期间录制它 基本上我想将 WPF 渲染为视频 或列出一系列保存为位图的帧 关
  • Nest.js 中使用 @nestjs/passport 进行可选身份验证

    我有一条需要经过身份验证和未经身份验证的用户使用的路线 我用 UseGuards AuthGuard jwt 启用身份验证 但它会阻止任何未经身份验证的用户访问该路由 正常 如何允许未经身份验证的用户也访问该路由 似乎没有我可以传递的选项A
  • 如何在 Git 中分离子目录但保留所有分支

    我一直在关注这个问题的答案将子目录分离到单独的 Git 存储库中 https stackoverflow com questions 359424 detach subdirectory into separate git reposito
  • UITableView 不重用单元格,这样做的好例子吗?

    我的 UITableView 有 5 个单元格 每个都有一个 UITextField 作为子视图 用户将在其中输入数据 如果我确实使用单元格重用 则当单元格滚动到视图之外时 文本字段将被清除 我不想处理这个问题 有没有办法不重复使用单元格
  • 如何编辑引导程序导航栏的样式?

    我正在尝试编辑引导导航栏的样式 但是 例如 我无法编辑颜色和删除边框 我想将颜色更改为白色 并将边框颜色更改为白色 并且我已包含以下代码 谁能告诉我我做错了什么 navbar default background color ffffff