品牌形象似乎并不“响应”

我遇到了品牌徽标图片的问题。即使它在我的电脑上看起来不错，我仍然使用背景色来检查悬停，并且它看起来很偏离位置。请检查这一点。顺便说一句，我是网页设计新手，所以你可能会在我的代码中看到很多错误，嘿嘿。 pd：我将图片上传到Imgur，但我直接从文件夹中使用它。品牌形象似乎并不“响应”

.navbar-default { 
 
    background-color: #4bd434; 
 
    border-color: #209c44; 
 
} 
 
.navbar li a:hover:not(.active) { 
 
    background-color: #209c44; 
 
} 
 
.navbar-default .navbar-brand { 
 
    color: #ffffff; 
 
} 
 
.navbar-default .navbar-nav > li > a { 
 
    color: #ffffff; 
 
    font-weight: bold; 
 
} 
 
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { 
 
    color: black; 
 
} 
 

 
body { 
 
    background-image: url("Imagenes/1.jpg"); 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    background-attachment: fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 

 
.jumbotron { 
 
    margin-top: 100px; 
 
} 
 

 
.jumbotron h1{ 
 
    text-align:center; 
 
} 
 

 
.map-responsive{ 
 
    overflow:hidden; 
 
    padding-bottom:40%; 
 
    position:relative; 
 
    height:0; 
 
} 
 
.map-responsive iframe{ 
 
    left:0; 
 
    top:0; 
 
    height:100%; 
 
    width:100%; 
 
    position:absolute; 
 
} 
 
#brand-image { 
 
    height: 110px; 
 
    width: 110px; 
 
    padding-bottom: 40px; 
 
    margin-top: -24px; 
 
} 
 

 
#brand-image:hover { 
 
    background-color: red; 
 
}

<!DOCTYPE html> 
 
<html lang="es"> 
 
<head> 
 
    <title>Central de Reparaciones</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
    <link rel="stylesheet" type="text/css" href=".\sheet.css"> 
 
</head> 
 
<body> 
 
    <nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
     <a class="navbar-brand" a href="./index.html"> 
 
     <img class="img-responsive" id="brand-image" alt="Website Logo" src="http://s14.postimg.org/rqjmwt8r5/logo.png"/> 
 
     </a> 
 
     <ul class="nav navbar-nav">   
 
     <li><a href="./ajax/heladeras.html">Heladeras</a></li> 
 
     <li><a href="./ajax/lavarropas.html">Lavarropas</a></li> 
 
     <li><a href="./ajax/secarropas.html">Secarropas</a></li> 
 
     <li><a href="./ajax/microondas.html">Microondas</a></li> 
 
     <li><a href="./ajax/televisores.html">Televisores</a></li> 
 
     <li><a href="./ajax/lavavajillas.html">Lavavajillas</a></li>   
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#"><span class="glyphicon glyphicon-earphone"></span> (0223) 482-5446</a></li> 
 
     <li><a href="./ajax/donde.html"><span class="glyphicon glyphicon-map-marker"></span> Dónde estamos</a></li> 
 
     </ul> 
 
    </div> 
 
    </nav> 
 
    
 
    <div class="container">  
 
    <div class="jumbotron well"> 
 
     <div class="page-header"> 
 
     <h1>Central de Reparaciones</h1>  
 
     </div> 
 
     <p>Somos service oficial de Whirpool blablablablal</p> 
 
     <p>ASDSDASDSDASDDSDASDSDASDDSDDDASDASD</p> 
 
    </div> 
 
    </div> 
 

 
</body> 
 
<script src=".\script.js"></script> 
 
</html>

来源

2016-01-19 Varulvsnatt

似乎是#brand-image的路要走，因为padding-bottom: 40px;。删除它应该可以解决问题。如果您想保持相同的像素比例，请使用margin-bottom而不是padding-bottom。

你的CSS应该是这样的：

#brand-image { height: 110px; width: 110px; margin-bottom: 40px; margin-top: -24px; }

来源

2016-01-19 18:47:49 Miodrag

可是我的标志变大。有没有办法让它自动适应导航栏？ – Varulvsnatt

在'＃brand-image'中设置高度为70px，并注释/删除填充底部/页边距属性。我还会在' '中添加bootstrap'hidden-xs'类，以将徽标隐藏在额外的小设备上。 – Miodrag

品牌形象似乎并不“响应”

回答

相关问题