使用 boostrap 未显示导航栏品牌

问题描述 投票:0回答:1

我尝试修复我的导航栏品牌很长一段时间,但我不知道出了什么问题。当屏幕超过 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 帮助我看到我看不到的东西

它显示在移动视图中,但不显示在笔记本电脑视图中

html navbar
1个回答
0
投票

这可能有助于解决问题。
尝试直接使用

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;
}

无论屏幕尺寸如何,这都有助于一致地显示您的徽标。 如果您仍然遇到错误,请检查控制台并提供更多信息。

© www.soinside.com 2019 - 2024. All rights reserved.