[英]How to fix the overlapping navbar elements on small screen created using bootstrap?
Navbar品牌名稱和按鈕重疊
這是小屏幕上的理想結果
導航欄代碼
<nav class="navbar navbar-default micah-navbar-bg">
<div class="navbar-header">
<a class="navbar-brand navbar-brand-left" href="#"> <img src="/sites//cologo.png" alt="logo"></a><p style="display:inline-block;">Company name</p>
<button id="quickLinksbtn" type="button" class="btn btn-danger ">QUICK LINKS</button> <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>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div class="navbar-header navbar-right">
<p class="navbar-text">
<a href="#" class="navbar-link">Username</a>
</p>
</div>
</div>
</nav>
CSS的快速鏈接
#quickLinksbtn{
position: absolute;
right: 100px;
margin-top: 45px;
border-radius: 0px;
}
我認為可能會發生混亂。 “快速鏈接”方塊將無法保持相同大小,徽標,導航按鈕也將保持不變。
這就是為什么它們重疊的原因。
就個人而言:我將按照您希望它在移動設備上的外觀完全構建移動版本,並將其全部放入div中,並在大於800px的任何內容上使該div“顯示:無”。 而“ display:block”的大小則小於此值。
同樣,您的桌面導航部分將相反。
@media screen and (max-width: 800px) {
.mobile-nav{display:block;}
.desktopnav{display:none;}
}
@media screen and (min-width: 801px) {
.mobile-nav{display:none;}
.desktopnav{display:block;}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.