Weird Probleme mit bootstrap navbar auf kleineren Bildschirmen

Question

So gibt es ein seltsames Problem mit meinem bootstrap navbar Ich habe Probleme mit.

Jedes Mal, wenn ich auf einen kleineren Bildschirm gehe, passiert dies! Es ist nichts Besonderes über das Styling andere dann die Schriftart und Größe ....

.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

Es geht nicht um die Bildschirmgröße, per se. Der Inhalt in der Navbar nimmt einfach zu viel Platz in Anspruch und drückt so die Links - wohin sonst würden sie gehen? Was erwartest du zu passieren?

Versuchen Sie, die Buchstaben der Links mit den von Ihnen ausgewählten Browser-Entwicklertools zu entfernen, und die Menüelemente werden in derselben Zeile angezeigt, wenn genügend Speicherplatz vorhanden ist.

Sie können dieses Problem lösen, indem:

• Ändern der Größe der Links, so dass sie immer fit, außer wenn das Menü in Hamburger-Modus befindet.
• Ändern Sie, damit das Hamburgermenü auf einer höheren Bildschirmbreite angezeigt wird.

Answer 2

Weird Navbar Problem (oder Verhalten) hängt von seinem kollabierenden Haltepunkt. In diesem Fall können Sie diesen Haltepunkt für Ihre Bedürfnisse überschreiben: navbar kollabiert jetzt, wenn min-width: 768px, wechseln Sie zu max-width: 1000px und es löst das Problem.

@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

Sie könnten einfach eine Medien-Abfrage verwenden, um die font-size Ihre Links zu steuern, um dieses Problem alle zusammen zu vermeiden.

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

Alternativ sehen diese post SO den Haltepunkt zu ändern, wenn das mehr Sinn macht.

Nebenbei bemerkt: Betrachten Polsterung auf Ihre navbar zu ändern statt Höhe verwendet wird, da es Nebenwirkungen unter 768px (die Hintergrundfarbe nicht mehr sichtbar sein wird, da die navbar einen Standardwert von min-height: 50px hat) hat.

Arbeitsbeispiel.

.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>