自舉導航欄在較小屏幕上的奇怪問題

Question

所以我的自舉導航欄存在一個奇怪的問題，我遇到了麻煩。

每次我去一個更小的屏幕，這發生！沒有任何關於其它的造型則文本的字體和大小獨特....

.navbar { 
    font-size: 30px; 
    border: 0; 
    height: 65px; 
} 

.navbar-nav li a:hover, 
.navbar-nav li.active a { 
    color: #e67e22 !important; 
    font-size: 45px !important; 
} 

.navbar-brand { 
    font-size: 40px; 
} 

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="../home.html" style="color:black;"><b>Brandon Nolan</b></a> 

    </div> 
    <div class="collapse navbar-collapse" id="myNavbar"> 
     <ul class="nav navbar-nav navbar-right"> 


     <li><a href="#portfolioAnchor" style="color:black;"><b>Bootstrap</b></a></li> 
     <li><a href="#blogAnchor" style="color:black;"><b>Spring</b></a></li> 
     <li><a href="#contactMeAnchor" style="color:black;"><b>Angular</b></a></li> 
     <li><a href="#aboutMeAnchor" id="b1Scroll" style="color:black;"><b>Contact</b></a></li> 
     </ul> 
    </div> 
    </div> 
</nav> 

Answer 1

這不是屏幕大小，本身。導航欄中的內容只佔用太多空間，從而推低了鏈接 - 他們會去哪裏？你期望發生什麼？

嘗試使用您選擇的瀏覽器開發人員工具刪除鏈接的字母，並且在有足夠的空間時，您會看到相同行上的菜單項返回。

您可以通過解決這個問題：

• 更改鏈接的大小，所以他們總是契合除了當菜單是漢堡包模式。
• 更改爲使漢堡菜單顯示在更高的屏幕寬度上。

Answer 2

奇怪的導航欄的問題（或行爲）取決於其摺疊斷點。在這種情況下，您可以根據需要覆蓋此斷點：現在，當min-width: 768px，更改爲max-width: 1000px並且它正在解決問題時，導航欄會崩潰。

@media (max-width: 1000px) { 
    .navbar-header { 
     float: none; 
    } 
    .navbar-toggle { 
     display: block; 
    } 
    .navbar-collapse { 
     border-top: 1px solid transparent; 
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 
    } 
    .navbar-collapse.collapse { 
     display: none!important; 
    } 
    .navbar-nav { 
     float: none!important; 
     margin: 7.5px -15px; 
    } 
    .navbar-nav>li { 
     float: none; 
    } 
    .navbar-nav>li>a { 
     padding-top: 10px; 
     padding-bottom: 10px; 
    } 
    .navbar-text { 
     float: none; 
     margin: 15px 0; 
    } 
    /* since 3.1.0 */ 
    .navbar-collapse.collapse.in { 
     display: block!important; 
    } 
    .collapsing { 
     overflow: hidden!important; 
    } 
} 

JSFiddle

Answer 3

你可以簡單地使用媒體查詢來控制你的鏈接的font-size以避免此問題一起。

@media (max-width: 991px) { 
    .navbar.navbar-default .navbar-nav > li > a { 
    font-size: 20px; 
    } 
} 

或者看到這個SO post更改斷點，如果更有意義。

旁註：考慮使用填充改變你的導航欄，而不是高度，因爲它具有768px下的副作用（背景顏色將不再是可見的，因爲navbar有min-height: 50px默認）。

工作示例。

.navbar.navbar-default { 
 
    border-color: transparent; 
 
    padding: 15px 0; 
 
} 
 
.navbar.navbar-default .navbar-nav > li > a { 
 
    font-size: 30px; 
 
    color: #000; 
 
    font-weight: bold; 
 
} 
 
.navbar.navbar-default .navbar-nav > li > a:hover, 
 
.navbar.navbar-default .navbar-nav > li.active a { 
 
    color: #e67e22; 
 
} 
 
.navbar.navbar-default .navbar-brand { 
 
    font-size: 40px; 
 
    color: black; 
 
    font-weight: bold; 
 
} 
 
.navbar.navbar-default .navbar-brand:hover { 
 
    color: #e67e22; 
 
} 
 
@media (max-width: 991px) { 
 
    .navbar.navbar-default .navbar-nav > li > a { 
 
    font-size: 20px; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container"> 
 

 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="../home.html"><b>Brandon Nolan</b></a> 
 
    </div> 
 

 
    <div class="collapse navbar-collapse" id="myNavbar"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#portfolioAnchor">Bootstrap</a> 
 
     </li> 
 
     <li><a href="#blogAnchor">Spring</a> 
 
     </li> 
 
     <li><a href="#contactMeAnchor">Angular</a> 
 
     </li> 
 
     <li><a href="#aboutMeAnchor" id="b1Scroll">Contact</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 

 
    </div> 
 
</nav>