Bootstrap 4 - Navigationsmenü Problem auf mobilen Geräten

Versuchen, Website-Layouts Erstellung mit dem neuesten bootstrap 4 alpha 4 (in Übereinstimmung mit jQuery 3) zu lernen und in dieser Frage würde ich gerne 1 Problem behandeln, die ich bisher begegnet bin.Bootstrap 4 - Navigationsmenü Problem auf mobilen Geräten

Wenn ich auf "Menü" -Taste in der Navigationsleiste "minimierter Modus" klicken - Dropdown-Liste Tropfen in der Mitte und dann nach links verschoben. Das sieht schrecklich aus. Problem erklärt:

Warum dies geschieht und wie erzwinge ich die Liste immer Drop-down von der rechten Seite statt (und bleiben dort nach Animation)? Hier

ist die Geige: http://jsfiddle.net/Wy22s/1073/

Edit: in akzeptierte Lösung gibt es kein Recht ausrichten .. Beachten Sie, dass in Geige dort Klasse ist pull-xs-right für navbar aber es Kick-in nicht:

http://jsfiddle.net/Wy22s/1075/

So ging ich weiter und machte meine eigene Lösung durch clearfix Zugabe div vor navbar:

<a class="navbar-brand" href="#">Website</a> 
    <div class="clearfix hidden-sm-up"></div> 
    <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar1"> 
     <!-- <a class="navbar-brand" href="#">Fixed bottom</a> --> 
     <div class="nav navbar-nav pull-xs-right"> 
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a> 
      <a class="nav-item nav-link" href="#">Features</a> 
      <a class="nav-item nav-link" href="#">Pricing</a> 
      <a class="nav-item nav-link" href="#">About</a> 
     </div> 
    </div>

so am Ende habe ich diesen Ansatz verwende (keine CSS Änderungen erforderlich):

http://jsfiddle.net/Wy22s/1077/

Quelle

2016-09-30 Alex

Bitte Suche eingrenzen und klären. Es müssen möglicherweise separate Fragen sein. – ZimSystem

@ZimSystem Punkt genommen. Die Fragen 2, 3 und 4 wurden entfernt. Jetzt ist es nur einer - der wichtigste. – Alex

ja und nein :) Ich habe deine Antwort als richtig markiert, aber es gibt kein richtiges Ausrichten, wie es in meiner Frage verlangt wurde. Aber ich habe es anders gelöst. Sehen Sie mein Update, wie genau ich es gemacht habe. – Alex

Diese Frage ist im Grunde hier beantwortet: Bootstrap 4 responsive navbar vertical

In Bootstrap 4, die navbar doesn 't Stack vertikal standardmäßig, so dass Sie einige CSS hinzufügen müssen, damit es wie Bootstrap 3.x funktioniert.

@media(max-width:544px) { 
    .navbar .navbar-nav>.nav-item { 
     float: none; 
     margin-left: .1rem; 
    } 
    .navbar .navbar-nav { 
     float:none !important; 
    } 
    .navbar .collapse.in, .navbar .collapsing { 
     clear:both; 
    } 
}

http://www.codeply.com/go/iapESdPQ7k

UPDATE: Die zusätzliche CSS wird nicht mehr benötigt für Bootstrap 4 Alpha 6, da die navbar vertikal stapeln: http://www.codeply.com/go/cCZz5CsMcD

Quelle

2016-10-03 16:22:23 ZimSystem

Bootstrap 4 - Navigationsmenü Problem auf mobilen Geräten

Antwort

Verwandte Themen