2016-08-19 3 views
-5

Ich habe kämpft dieses mobile Menü align zu machen, so dass sie (und die Taste Wagen) auf dem gleichen Niveau wie das Logo sind (und auf der rechten Seite), wenn auf einem Tablet/Handy sehen.Warum ist dieses mobile Menü nicht richtig ausgerichtet?

enter image description here

Nur kann es ... nicht zur Arbeit kommen und das Menü funktioniert nicht auf mobiles (iOS) entweder.

Auf einem Computer ist die Ausrichtung nicht richtig zwischen den drei Elementen, die mir diese Macht an die mobilen Version des Menüs falsch Schlange im Zusammenhang denken lassen.

Haben Sie eine Vorstellung davon, was ich falsch machen könnte?

Die Website selbst ist here.

Vielen Dank für Ihre Beratung!

+0

Bitte fügen Sie den Code in. Wir können‘ t helfen, indem Sie auf die visuelle Seite des Problems schauen. Wir müssen den Code lesen. – Option

Antwort

0

Du col-sm-Klassen, die Verwendung col-xs für mobile (extra klein).

0

Sie verwenden ein Bootstrap-Gitter. Unter dem "Mobile" -Breakpoint haben Sie keine Spalten definiert. Divs mit den Klassen .col-sm-* gehen 100% und stoppen zu schweben. Entweder ändern Sie diese in .col-xs-* oder Sie fügen etwas Styling hinzu, um die Elemente auf Bildschirmen unter dem sm-Haltepunkt zu schweben. Ich würde die zweite Methode bevorzugen. Auch ich würde versuchen, den Warenkorb und das Menü-Symbol in die gleiche Farbe zu passen.

+0

Vielen Dank für Ihren hilfreichen Vorschlag Jan. –

+0

Eigentlich sollten Sie alle Col-Klassen verwenden, um alle Bildschirmgrößen zu unterstützen. Sie können sowohl 'col-sm- *' als auch 'col-xs-' 'Klassen definieren, so dass es immer dem Bildschirm entspricht. –

+0

Ja, ich weiß, aber auf der kleinsten Bildschirmgröße sind die Spalten oft zu breit für den Zweck und so" Regelmäßiges "Floaten" gilt in den meisten Fällen besser, um den verfügbaren Platz so gut wie möglich zu nutzen. –

0

Sie sollten diesen Code in Ihre CSS-Datei setzen

.thumbnail>img, .thumbnail a>img { 
    float: left; 
} 

Es wird Logo align biegen Sie links ab und Menü + Warenkorb in Linie zu gehen ...

Verwandte Themen