我相信正在发生的事情是图像正在缩小直到消失，我想即使在移动设备上也保持相同的大小，并且还与导航栏/汉堡包的其余部分保持一致
<!DOCTYPE html>
<head>
</head>
<body>
<style>
/* --- header -- */
.navbar-header div.logo {
margin-top: -1%;
padding-bottom: 0;
}
.navbar-header div.logo a.navbar-brand {
padding: 0;
}
.navbar-header div.logo a.navbar-brand img {
width: 6%;
padding: 15px;
}
navbar-nav .navbar-brand {
display: flex;
align-items: center;
}
.navbar-nav .navbar-brand>img {
padding: 7px 14px;
}
/****override navbar height********/
.navbar-nav > li > a {
padding-top: 4px !important;
padding-bottom: 2px !important;
}
.navbar {
min-height: 5px !important
}
/*********************************/
header .navbar {
margin-bottom: 0;
}
.navbar-default {
border: none;
}
header .navbar-collapse ul.navbar-nav {
float: right;
margin-right: 0;
}
header .navbar-default {
background-color: transparent;
}
header .navbar {
min-height: 32px;
}
header .navbar-nav > li {
padding-bottom: 5px;
padding-top: 5px;
}
header .navbar-nav > li > a {
padding-bottom: 5px;
padding-top: 5px;
margin-left: 2px;
line-height: 30px;
font-weight: 700;
}
</style>
<header>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="logo">
<a class="navbar-brand" href="index.php"><img src="./img/logo.png"></a>
</div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="about.php">about us</a></li>
<li><a href="contact.php">Contacts</a></li>
</ul>
</div>
</div>
</div>
</header>
<div>content</div>
</body>
有谁知道如何防止徽标消失、移动或调整大小，同时保持网站的其余元素响应？
这是因为您已将图像设置为 % 的大小，因此您必须将其更改为设置的大小。这：
.navbar-header div.logo a.navbar-brand img {
width: 6%;
padding: 15px;
}
应该是这样的：
.navbar-header div.logo a.navbar-brand img {
width: 200px;
padding: 15px;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句