我尝试修复我的导航栏品牌很长一段时间,但我不知道出了什么问题。当屏幕超过 750 像素时,徽标不会显示,但当屏幕低于该数字时,徽标不会显示。这是我到目前为止的代码:
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<h1><a class="navbar-brand" href="#">SkinLove</a></h1>
</div>
<div class="navbar nav-tabs" >
<ul class="nav navbar-nav">
<li class="nav-item"><a class="active" href="#">Home</a></li>
<li class="nav-item"><a href="#">Tips</a></li>
<li class="nav-item"><a href="#">Contact us</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"> Login</span></a></li>
</ul>
</div>
</div>
</nav>
和我的CSS:
.navbar{
background-color: #FFC0CB;
}
.nav.navbar-nav.navbar-right li a{
color: #ffffff;
}
.nav.navbar-nav li a{
color: #ffffff;
}
/*.navbar.navbar-header a .navbar-brand {
color: #ffffff;
}*/
.nav.navbar-nav li a:hover{
color:#808080;
}
@media screen and (max-width: 750px){
.navbar-header {
padding: 15px;
text-align: center;
width: 100%;
}
.navbar-brand {float:none;}
.navbar .nav-tabs{
display: grid;
justify-content: center;
align-items: center;
}
}
ps 帮助我看到我看不到的东西
它显示在移动视图中,但不显示在笔记本电脑视图中
这可能有助于解决问题。
尝试直接使用
navbar-brand
,而不是将其包装在 <h1>
标签中。
<a class="navbar-brand" href="#">SkinLove</a>
并根据它对 CSS 进行更改:
.nav.navbar-nav.navbar-right li a,
.nav.navbar-nav li a {
color: #ffffff;
}
无论屏幕尺寸如何,这都有助于一致地显示您的徽标。 如果您仍然遇到错误,请检查控制台并提供更多信息。