[英]Bootstrap navbar-brand logo overlapping on collapse
因此,我制作了一個典型的Bootstrap導航欄,它適用於桌面尺寸。 默認情況下,當我按照其文檔示例中的說明添加用navbar-brand類包裝的徽標時,徽標懸在導航欄中。 我通過向鏈接本身添加填充來解決了這個問題。 直到我調整瀏覽器的大小以使其像移動設備一樣,此方法才能正常工作。 折疊時,導航欄的高度會減小以適合撥動開關,徽標再次懸空。 我該如何解決? 我是否通過添加填充使導航欄的高度正確? 還是應該通過專門分配使其固定高度?
徽標高55像素,寬128像素。
這是我的HTML:
<nav id="LC-navbar" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div id="LC-navbar-header" class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#LC-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a id="LC-navbar-brand" class="navbar-brand img-responsive" href="../">
<img class="img-responsive" src="../assets/img/logo-horizontal.png">
</a>
</div>
<div id="LC-navbar-collapse" class="collapse navbar-collapse">
<ul id="LC-navbar-links" class="nav navbar-nav navbar-right">
<li><a href="../">Home</a></li>
<li class="active"><a href="../shop/">Shop</a></li>
<li><a href="../team/">Our Team</a></li>
<li><a href="../about/">About Us</a></li>
<li><a href="../contact/">Contact Us</a></li>
</ul>
</div>
</div>
</nav>
和CSS:
#LC-navbar {
background-color: #202020;
border: none;
}
.navbar-brand {
padding-left: 30px;
}
#LC-navbar-links {
padding-right: 20px;
}
#LC-navbar-links li {
padding: 16px 10px;
}
#LC-navbar-links a {
font-size: 16px;
font-weight: 300;
text-transform: uppercase;
color: #c0c0c0;
-webkit-transition: color 0.25s;
-moz-transition: color 0.25s;
-o-transition: color 0.25s;
transition: color 0.25s;
}
#LC-navbar-links a:hover {
color: #BE1E2D;
}
#LC-navbar-links .active > a {
color: #BE1E2D;
background: none;
}
#LC-navbar-links .active > a:hover {
color: #BE1E2D;
background: none;
}
導航欄折疊時,如何更改樣式? 顯然是要更改突出問題,但是如果要折疊並打開時我希望它具有不同的背景色呢?
切換菜單的顯示寬度小於768像素,因此請使用max-width: 768px
媒體查詢。
@media (max-width: 768px) {
.navbar-brand {
height: 80px; // Logo will not overhang
}
#LC-navbar {
background-color: #ccc; // Change background color
}
.navbar-toggle {
margin-top: 25px; // Adjust toggle position
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.