Bootstrap 3 Horizontale Bildlaufleiste

Question

Ich weiß, dass diese Frage eine Million Mal gestellt wurde, aber ich bekomme leider eine horizontale Bildlaufleiste, wenn die Seite auf kleineren Bildschirmen ausgeblendet wird. Ich habe versucht, Zeilen hinzuzufügen. Container entfernen Doppelte Überprüfung. Ich kann es nicht herausfinden.

Ich habe eine Bootply mit dem Code gemacht. Wie ich schon sagte, habe ich hinzugefügt und entfernt von der Seitenstruktur und es ist noch nicht weg, so dass ich ratlos bin.

Dank

Nur um zu klären Ich habe viele der vorherigen Fragen zu diesem Thema und versuchte, arbeitete diese Lösungen durchgekommen und keiner von ihnen.

Answer 1

Das Problem ist, dass das Navbar-Nav innerhalb der Navbar-Header einen Überlauf aufgrund von Padding verursacht. Nur eine Verwendung navbar-text Link stattdessen.

http://www.bootply.com/zw2H1wW2EJ

<nav class="navbar navbar-inverse"> 
    <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 href="tel:555-555-5555" class="visible-xs navbar-text">&nbsp;&nbsp;<i class="glyphicon glyphicon-earphone"></i> Tap To Give Us A Call</a> 
    </div> 
    <div class="collapse navbar-collapse" id="myNavbar"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">Page 1</a></li> 
     <li><a href="#">Page 2</a></li> 
     <li><a href="#">Page 3</a></li> 
     </ul> 
    </div> 
    </div> 
</nav>