gpt4 book ai didi

javascript - Bootstrap 菜单栏在折叠时重叠 Logo

转载 作者:行者123 更新时间:2023-11-28 06:35:20 25 4
gpt4 key购买 nike

当导航栏折叠时(当它显示切换图标时),菜单(主页、服务、投资组合、关于、联系人)位于 Logo 上方。如果我从 Logo (nag-bar-brand) 中选择 position:absolute ,菜单会出现在中央。如果那里有菜单下方的标识。我希望你明白我的问题。英语不是我的母语。谢谢。HTML

<!--navbar-->
<div class="navbar navbar-default navbar-fixed-top">

<div class="container">

<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">

<span class="icon-bar"></span>`enter code here`
<span class="icon-bar"></span>
<span class="icon-bar"></span>

</button>

<a href="#"class="navbar-brand"><img id="brand-image" src=""><img src="images/logo.png" class="img-responsive" alt="website logo"></a>

<div class="collapse navbar-collapse navHeaderCollapse">

<ul class="nav navbar-nav navbar-right">

<li><a href="#">Home</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>

</div>

</div>
</div><!--end navbar-->

CSS:

.navbar {
background-color:#FFF;
border-radius: 0 px;
min-height: 85px;
}

.navbar-nav{
padding-top: 20px;
letter-spacing: 0.05em;
}

.navbar-nav > li{
padding-left:20px;
}

.navbar .nav >li > a:hover{
color: #19bcb9;
}
.navbar-brand{
position:absolute;
}

最佳答案

如果图像太大,就会发生这种情况。用max-height max-width限制图片

关于javascript - Bootstrap 菜单栏在折叠时重叠 Logo ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34730249/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com