html - 无法在导航栏中显示 Logo

标签 html css twitter-bootstrap

所以我在编写这个比萨饼网站时遇到了问题 - 我想将这个地方的 Logo 放在导航栏中(这也是到主页的链接)，但我无法显示它。我正在使用 Twitter Bootstrap 。这是代码:

/*#557c3e zielony*/
/*#F8B004 zloty*/
/*body { 
  padding-top: 80px; 
}*/
body {
  font-family: 'news cycle', serif;
  background-color: #660000;
}
.navbar {
  background-color: #557c3e;
  position: relative;
  height: 180px;
  border-radius: 0;
  border: 0;
}
.row {
  display: flex;
  justify-content: center;
 }
#logo {
  background-image: url('/wzgorzeSmakowMarcin/logo/logoMedium.png');
  width: 431px;
  height: 146px;
  margin-left: 15px;
}
.nav-pills {
  text-transform: uppercase;
  font-size: 1.5em;
  text-align: center;
  vertical-align: center;
  margin-top: 45px;
}
.nav-pills span, a {
  color: #F8B004;
}
.nav-pills span {
  font-size: 150%;
}

.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
  background-color: #f2f2f2;
  border-color: #f2f2f2;
  color: #F8B004;
}
#logoFB {
  max-width: 100px;
}
#logoFB:hover{
  background-color: #557c3e;
  border-color: #557c3e;
  color: #557c3e;
}
ul > li {
  margin-right: 50px;
}
h2 {
  text-align: center;
  color: #F8B004;
  line-height: 2;
}
#promocje {
  color: #F8B004;
  font-size: 1.5em;
}
h2> ol > li:hover {
  background-color: #F2F2F2;
  color: #976a02;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=News+Cycle' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>Kontakt - Wzgórze Smaków</title>
</head>
<body>

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
  <div class="row">
  <a class="navbar-brand" href="index.html"><div id="logo"></div></a>
  <ul class="nav nav-pills">
    <li role="presentation"><a href="menu.html"><span class="glyphicon glyphicon-cutlery"></span><br class="hidden-xs">Menu</a></li>
    <li role="presentation"><a href="promocje.html"><span class="glyphicon glyphicon-piggy-bank"></span><br class="hidden-xs">Promocje</a></li>
    <li role="presentation" class="active"><a href="kontakt.html"><span class="glyphicon glyphicon-earphone"></span><br class="hidden-xs">Kontakt</a></li>
    <li><a href="tel:691 671 702"><span id="nrTel">Zadzwoń! <div>691 671 702</div></span></a></li>
    <li><a target="_blank" href="https://www.facebook.com/wzgorzesmakow/?fref=ts"><img src="wzgorzeSmakowMarcin/facebook.png" id="logoFB"></a></li>
  </ul>

    </div>
  </div>
</nav>


	<div class="container" id="glowna"> 
	<!-- glowna czesc -->
	<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2441.4953626985284!2d16.848684315860655!3d52.270708262426325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470451f45b8ebb65%3A0xdeb8ff981de52abc!2sDworcowa+58%2C+62-040+Puszczykowo!5e0!3m2!1spl!2spl!4v1470346020342" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

	<h2>Puszczykowo, ul. Dworcowa 58
	<div><a href="tel:691 671 702">691 671 702</a></div>
	<div>ZAPRASZAMY!</div>
	</h2>
	</div>

  <script src="js/jquery-2.1.4.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/script.js"></script>
</body>
</html>

jsfiddle

最佳答案

您好，现在您只需在 li 中将 margin-right:20px; 定义为 htis 

.nav-pills>li+li {
    margin-right: 20px;
}


/*#557c3e zielony*/
/*#F8B004 zloty*/
/*body { 
  padding-top: 80px; 
}*/
body {
  font-family: 'news cycle', serif;
  background-color: #660000;
}
.navbar {
  background-color: #557c3e;
  position: relative;
  height: 180px;
  border-radius: 0;
  border: 0;
}
.row {
  display: flex;
  justify-content: center;
 }
#logo {
  background-image: url('http://economictimes.indiatimes.com/photo/33185989.cms');
  width: 431px;
  height: 146px;
  margin-left: 15px;
}
.nav-pills {
  text-transform: uppercase;
  font-size: 1.5em;
  text-align: center;
  vertical-align: center;
  margin-top: 45px;
}
.nav-pills span, a {
  color: #F8B004;
}
.nav-pills span {
  font-size: 150%;
}
.nav-pills>li+li {
margin-right: 20px;
}
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
  background-color: #f2f2f2;
  border-color: #f2f2f2;
  color: #F8B004;
}
#logoFB {
  max-width: 100px;
}
#logoFB:hover{
  background-color: #557c3e;
  border-color: #557c3e;
  color: #557c3e;
}
ul > li {
  margin-right: 50px;
}
h2 {
  text-align: center;
  color: #F8B004;
  line-height: 2;
}
#promocje {
  color: #F8B004;
  font-size: 1.5em;
}
h2> ol > li:hover {
  background-color: #F2F2F2;
  color: #976a02;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=News+Cycle' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>Kontakt - Wzgórze Smaków</title>
</head>
<body>

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
  <div class="row">
  <a class="navbar-brand" href="index.html"><div id="logo"></div></a>
  <ul class="nav nav-pills">
    <li role="presentation"><a href="menu.html"><span class="glyphicon glyphicon-cutlery"></span><br class="hidden-xs">Menu</a></li>
    <li role="presentation"><a href="promocje.html"><span class="glyphicon glyphicon-piggy-bank"></span><br class="hidden-xs">Promocje</a></li>
    <li role="presentation" class="active"><a href="kontakt.html"><span class="glyphicon glyphicon-earphone"></span><br class="hidden-xs">Kontakt</a></li>
    <li><a href="tel:691 671 702"><span id="nrTel">Zadzwoń! <div>691 671 702</div></span></a></li>
    <li><a target="_blank" href="https://www.facebook.com/wzgorzesmakow/?fref=ts"><img src="http://economictimes.indiatimes.com/photo/33185989.cms" id="logoFB"></a></li>
  </ul>

    </div>
  </div>
</nav>


	<div class="container" id="glowna"> 
	<!-- glowna czesc -->
	<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2441.4953626985284!2d16.848684315860655!3d52.270708262426325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470451f45b8ebb65%3A0xdeb8ff981de52abc!2sDworcowa+58%2C+62-040+Puszczykowo!5e0!3m2!1spl!2spl!4v1470346020342" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

	<h2>Puszczykowo, ul. Dworcowa 58
	<div><a href="tel:691 671 702">691 671 702</a></div>
	<div>ZAPRASZAMY!</div>
	</h2>
	</div>

  <script src="js/jquery-2.1.4.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/script.js"></script>
</body>
</html>

关于html - 无法在导航栏中显示 Logo ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38788088/

上一篇：html - 我如何为 div 中的链接添加不同的样式并向其添加类？

下一篇：javascript - 如何只加载 yii2 中需要的 javascript 文件

相关文章：

html - 强制导航栏元素保持在一行

twitter-bootstrap - ng2-bootstrap 中的 Typeahead 无法显示 Angular 2 中的项目

wordpress - 如何将 WordPress 页面模板的 Bootstrap 脚本和样式排入队列，而不是整个站点

css - 表格 DIV 和 CSS

jquery - 处理击中 jquerymobile 的小型设备

javascript - 如何使用二级 div 向下移动一个 div 元素？

css - 悬停在 <object type ="application/x-shockwave-flash"> 上方时将光标变成手

javascript - 简单的 Chrome 扩展但有问题吗？

php - 我无法回显变量，但我可以在函数中使用它吗？

html - 使用 Bootstrap 3 的 Full Width Image Carousel 进行内容定位

©2024 IT工具网  联系我们